Как можно установить флажок для материала в Angular одним щелчком мыши?

Question

Выполнение:

У меня есть несколько флажков материала в компоненте диалога материалов. Они представляют фильтр столбцов для таблицы:

<h1 mat-dialog-title>Filter</h1>
<div mat-dialog-content>
    <ng-container *ngFor="let column of allColumns; index as i; first as firstEntry ">
    <mat-checkbox *ngIf="!firstEntry" class="checkbox" [checked]="checkedList[i]" [aria-label]="column" (click)=doToggle(i)>{{column}}</mat-checkbox>
    </ng-container>
</div>
<div mat-dialog-actions>
  <button mat-button (click)="onNoClick()">Abbrechen</button>
  <button mat-button [mat-dialog-close]="allColumns" cdkFocusInitial>Reset</button>
  <button id="ok-button" mat-button [mat-dialog-close]="displayedColumns" cdkFocusInitial>Ok</button>
</div>

Когда я нажимаю на флажок, я хочу проверить его. Все логические значения флажков сохраняются в логическом массиве с именем checkedList. Когда я нажимаю на флажок, выполняется метод doToggle (i).

doToggle(i: number){
    if(this.checkedList[i]){
      this.displayedColumns[i] = this.allColumns[i];
    }
    else{
      this.displayedColumns[i] = null;
    }
    this.checkedList[i] = !this.checkedList[i];
  }

Метод также заполняет или очищает значения в соответствующей позиции списка столбцов. В конце метода он отменяет логическое значение в соответствующей позиции в checkList.

Проблема: Мне всегда нужно дважды щелкнуть по флажку, чтобы проверить или снять его. Значения добавлены или удалены правильно. Но все же я должен нажать два раза на флажок. Почему это?

Answer 1

Попробуйте отправить значение флажка в событии щелчка. Добавьте в шаблон флажок ссылочной переменной (#ck) и получите ее значение ck.checked

[checked]="checkedList[i]" [aria-label]="column" #ck (click)="doToggle(i,!ck.checked)" 

и в функции doToggle

doToggle(i,value){
    this.checkedList[i] = value;
    if(this.checkedList[i]){
      this.displayedColumns[i] = this.allColumns[i];
    }
    else{
      this.displayedColumns[i] = null;
    }
  }