Angular ngfor全选并取消选择

Question

我有项目：

items: [
{name: 'Name'},
{name: 'Name'},
{name: 'Name'}
]

我在html:中显示它们

<ion-checkbox (click)="click(); selectAllItems()" class="checkboxas" [(ngModel)]="allTobuli"></ion-checkbox>
<!-- this isnt in ngFor and it Selects all items -->
<ion-card *ngFor="let item of jsonObj" class="relative" (click)="compareTobuli(item,i);checkboxTobuli(item)">
<ion-checkbox (click)="compareTobuli(item,i)" [(ngModel)]="item.allTobuliItem" class="checkboxas absolut-check"></ion-checkbox>
</ion-card>

正如您所看到的，它们中的每一个都得到了复选框——如果您单击项目，它将被添加到另一个数组中，复选框值将变为true。另一件事是ngFor中有一个复选框，它使另一个数组与项相同。

问题是，当单击ngFor中没有的复选框时，我不知道如何更改ngFor所有复选框的值

我正在使用集合，所以这是我的TS:

compareTobuli(item,i){
if (this.selected.has(item)) {
this.selected.delete(item);
console.log('Trinam', this.selected)
} else {
this.selected.add(item);
console.log('Pridedan', this.selected)
}
}
click() {
this.clicked = !this.clicked;
console.log(this.clicked);
return this.clicked;
}
selectAllItems() {
if(this.clicked == true) {
this.selected = new Set(this.jsonObj);
console.log(this.selected);
}
else {
this.selected = new Set;
console.log('deleted all', this.selected);
}
}
checkboxTobuli(item){
item.allTobuliItem = !item.allTobuliItem; 
}

Answer 1

首先：这是一个工作堆栈litz，它还可以在单击时选择和取消选择所有值。

您已经在ion-checkbox上使用(click)="click(); selectAllItems()"来调用click()和selectAllItems()。

您所需要做的就是修改这些方法中(迭代项的(特定值。

selectAllItems() {
for(let i=0; i<this.jsonObj.length; i++) {
let item = this.jsonObj[i]; // this is your item from *ngFor="let item of jsonObj"
item.allTobuliItem = true;  // select every single item
}
}

Answer 2

您需要为jsonObj中的每个项目更新allTobuliItem的值。Angular的数据绑定将处理其余部分。例如：

模板

<ion-checkbox
(click)="click(); selectAllItems()"
class="checkboxas"
[(ngModel)]="allTobuli"></ion-checkbox>

组件

public selectAllItems() {
this.jsonObj = this.jsonObj.map(item => {
item.allTobuliItem = this.allTobuli;
return item;
});
}