Снять отметку со всех отмеченных флажков Angular2

Question

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

Вот мой HTML

<li *ngFor="let item of listItems" class="filter-list__item"> 
    <label class="filter-list__itemLabel"> 
     <input type="checkbox" value="{{item.id}}" [checked]="checked" /> 
     <span innerHTML="{{item.name}}"></span> 
    </label> 
</li> 
<button (click)="resetAll()"></button> 

Answer 1

Вы, вероятно, хотите, чтобы связать проверяемый атрибут состояния элемента, как это.

<li *ngFor="let item of listItems" class="filter-list__item"> 
    <label class="filter-list__itemLabel"> 
     <input type="checkbox" value="{{item.id}}" [checked]="item.checked" /> 
     <span innerHTML="{{item.name}}"></span> 
    </label> 
</li> 

<button (click)="resetAll()"></button> 

Теперь вы можете создать функцию resetAll в компоненте для доступа к элементам списка и сбросить значение к ложному

resetAll() { 
    this.listItems.forEach((item) => { 
    item.checked = false; 
    }) 

Answer 2

Моего решения заключается в следующем, и он работает как шарм:

Предположим, вы используете модальный диалог. Лучший способ - подписаться на это на Close-Observable. Затем вы просто переписываете основной список с помощью самого клона. Angluar теперь вынужден перекрасить весь список и автоматически удаляет все тики.

ngAfterViewInit() { 

    this.modal.onClose.subscribe(() => { 
     if (this.objectList) { 
      this.objectList = JSON.parse(JSON.stringify(this.objectList)); 
     } 
    }); 

} 

Если вы не используете модальный диалог, просто реализуйте метод для запуска процесса перезаписи.