如何取消选中复选框单击angular 7中的按钮

Question

我有几个复选框，它们的值来自循环，这里我的要求是只有onload所有复选框默认情况下都会被选中，但点击清除按钮时所有复选框都应该被取消选中，这是下面的代码

home.component.html

<li *ngFor="let child of nestedjson; let i = index"><input type="checkbox" checked>{{child.name}}</li>
<div><button (click)="clear()" type="submit">clear</button></div>

主页组件.ts

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import Speech from 'speak-tts';
import { RxSpeechRecognitionService, resultList, } from '@kamiazya/ngx-speech-recognition';
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.css'],
providers: [ RxSpeechRecognitionService ]
})
export class HomeComponent implements OnInit {  
showit:any;
nestedjson:any;
constructor(private formBuilder: FormBuilder,public service: RxSpeechRecognitionService) {
}
ngOnInit() {
this.nestedjson = [
{ name: "parent1", value: ["child11", "child12"] },
{ name: "parent2", value: ["child2"] },
{ name: "parent3", value: ["child3"] }
];
this.showit = true;
} 
clear(){
}
}

Answer 1

这样尝试：

工作演示

.html

<li *ngFor="let child of nestedjson; let i = index">
<input type="checkbox" [(ngModel)]="child.checked">
{{child.name}}
</li>
<div><button (click)="clear()" type="submit">clear</button></div>

.ts:

nestedjson = [
{ name: "parent1", value: ["child11", "child12"], checked: true },
{ name: "parent2", value: ["child2"], checked: true },
{ name: "parent3", value: ["child3"], checked: true }
];
clear() {
this.nestedjson.forEach(child => {
child.checked = false
})
}

如果您无法更改json，请执行以下操作：

.ts

checkedItems = this.nestedjson.map(x => ({ name: x.name, checked: true }));

.html

<li *ngFor="let child of nestedjson; let i = index">
<input type="checkbox" [(ngModel)]="checkedItems[i].checked">
{{child.name}}
</li>