角度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中沒有的checkBox時，我不知道如何更改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

您需要更新的價值allTobuliItem在每個項目jsonObj 。 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;
  });
}

Answer 2

首先：這是一個有效的堆棧閃電 ，單擊時還可以選擇和取消選擇所有值。

您已經在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
    }
}