Angular Material 垫列表选项

Question

Material2中有没有办法通过事件函数检测checkbox是true还是false。传递$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，它将单击的 MatOption 提供为 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);
}

Angular Material 垫列表选项

Angular Material mat-list-option

typescript

angular-material2

angular