Angular Material mat-list-option

Question

Material 2 中有没有办法通过事件函数检测复选框是真还是假。传递 $event 仅检测打字稿端的鼠标或键盘，需要检测它是选中还是未选中。

<mat-selection-list #list   >
  <mat-list-option *ngFor="let aser of fo; let i = index" (click)="onAreaListControlChanged(aser.ID, aser.Name, aser.Number, $event)"  checkboxPosition="before"    [value]="aser.Number" [selected]="aser.selected"  >
    <span style="font-size:11px"  >{{aser.selected}} {{aser.first}} - {{aser.Number}}</span>
  </mat-list-option>
</mat-selection-list>

打字稿

onAreaListControlChanged(sid, sname, snum, $event) { if(checked==true else false}

Answer 1

使用 MatSelectionList 的selectionChange事件。事件对象是一个MatSelectionListChange，它提供了 clickedMatOption作为option属性，它反过来为您提供selected（选中的）值：

<mat-selection-list #list (selectionChange)="selectionChange($event.option)">
  <mat-list-option
    *ngFor="let aser of fo; let i = index"
    (click)="onAreaListControlChanged(aser.ID, aser.Name, aser.Number, $event)"
    checkboxPosition="before"
    [value]="aser.Number"
    [selected]="aser.selected"
  >
    <span style="font-size:11px"
      >{{ aser.selected }} {{ aser.first }} - {{ aser.Number }}</span
    >
  </mat-list-option>
</mat-selection-list>

TS

selectionChange(option: MatListOption) {
  console.log(option.selected);
}