点击取消表单按钮时， mat复选框不清除

Question

我在一个带有复选框的表单中有一个城市列表。尝试取消表单时，未清除选中的复选框列表。但是当我取消每个复选框时，它会起作用

api-model.ts

export interface City{
city_Name: string;
}

class-model.ts

export class eModel {
cityList: Array<City>=[];
}

app.html

<div class="row">
<div class="column-3">
<div *ngFor="let data of cityData; let i=index">
<mat-checkbox color="primary"  (change)="getCheckboxValues(data, i, $event)" >
&nbsp; {{data.city_Name}}
</mat-checkbox>
</div>
</div>
</div>

<button mat-raised-button class="cancel-button" (click)="Cancel()">Cancel</button>

app.ts

cityData: City[] = [];
ngOnInit(): void {
this.eModel.cityList = [];
loadCityList();
}
loadCityList() {
return this._getAPIservice.getCity().subscribe(data => {
this.cityData = data;
});
}
Cancel(): void {
this.eForm.resetForm({});
loadCityList();
this.eModel.cityList = [];
}

Answer 1

可以通过使用元素引用变量来实现。

试试这个:

<div class="row">
<div class="column-3">
<div *ngFor="let data of cityData; let i=index">
<mat-checkbox #chkboxes color="primary"  (change)="getCheckboxValues(data, i, $event)" >
&nbsp; {{data.city_Name}}
</mat-checkbox>
</div>
</div>
</div>
<button mat-raised-button class="cancel-button" (click)="Cancel()">Cancel</button>

在ts:

@ViewChildren('chkboxes') chkboxes: QueryList<any>; // Define this at the top
Cancel(){
this.chkboxes.forEach(x => x.checked = false);
}