Выбрать все элементы в угловой флажок

Выбрать все элементы в угловой флажок

22.03.2020 05:05:40 Просмотров 26 Источник

У меня есть список, в котором есть несколько флажков. Я сделал функцию для одного выбора и нескольких разделов, и пользователь может получить данные либо для одного выбора, либо для нескольких. Теперь проблема, в которой я застрял, заключалась в том, что когда я удаляю выбор одного флажка в списке, то флажок выбрать все должен быть снят, но я не могу этого сделать.

Ниже приведен мой код 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);
  }
У вопроса есть решение - Посмотреть?

Ответы - Выбрать все элементы в угловой флажок / Select all items in a checkbox Angular

Является ответом!
A. Chiesa

22.03.2020 05:20:28

Быстрое, возможное решение.

Во-первых, вы разделяете двойную привязку 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" >

В компоненте ТС:

// 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;
}

Этого должно быть достаточно.

Закрыть X