选择复选框Angular中的所有项目答案

【问题标题】：Select all items in a checkbox Angular选择复选框Angular中的所有项目
【发布时间】：2020-03-22 22:26:19
【问题描述】：

我有一个包含多个复选框的列表。我已经为单选和多节做了一个功能，用户可以获取单选和多选的数据。现在我被卡住的问题是，当我删除列表中一个复选框的选择然后全选复选框应该被取消选择但我无法做到这一点。

下面是我的代码 HTML

  <div item-start class="checkbox-wrapper">
    <input type="checkbox" value="Select All" (change)="selectAllLineItem($event)">
  </div>

    <ion-card *ngFor="let putAwayPurchaseOrderListDetails of putAwayPurchaseOrderListDetailsData | filter:searchText; let i = index">
       <div class="checkbox-wrapper">
         <input class="form-check-input[(ngModel)]="putAwayPurchaseOrderListDetailsData[i].checked"  type="checkbox" >
       </div>
       <div>
         {{putAwayPurchaseOrderListDetails.PO_NUMBER}}
       </div>
    </ion-card>

  selectedLineItem() {
    const selectedLineItem = this.putAwayPurchaseOrderListDetailsData.filter((putAwayPurchaseOrderListDetails) => putAwayPurchaseOrderListDetails.checked);
    this.navCtrl.push(PutAwayPurchaseOrderItemDetailsPage,{selectedLineItem})   
  }


  selectAllLineItem(event) {
    console.log(event)
    const checked = event.target.checked;
    this.putAwayPurchaseOrderListDetailsData.forEach(item => item.checked = checked);
  }

【问题讨论】：

putAwayPurchaseOrderListDetailsData 是不是有点拗口？
@A.Chiesa 是，但命名约定已记录在案
它是 35 个字符，即使它已记录在案，也可能有 something 出了问题。
我同意你@A.Chiesa

标签： angular

【解决方案1】：

快速可行的解决方案。

首先，拆分 ngModel 双重绑定并创建一个处理程序：

...
<input type="checkbox" value="Select All" [(ngModel)]="selectAllItems" (change)="selectAllLineItem($event)">
...
<input class="form-check input 
    [ngModel]="putAwayPurchaseOrderListDetailsData[i].checked"
    (ngModelChange)="onItemChange(i, $event)"
    type="checkbox" >

在组件ts中：

// new property:
selectAllItems: boolean = false;
...
onItemChange(itemIdx: number, isChecked: boolean) {
  this.putAwayPurchaseOrderListDetailsData[itemIdx].checked = isChecked;
  // doesn't if selectAllItems is already false.
  if (!isChecked) this.selectAllItems = false;
}

应该够了。

【讨论】：