角材料垫列表选项答案

【问题标题】：Angular Material mat-list-option角材料垫列表选项
【发布时间】：2020-01-28 23:01:57
【问题描述】：

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

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

【问题讨论】：

您从哪里获得indeterminateChange 事件？您只能将selectionChange 事件绑定到MatSelectionList。
不确定你想要达到什么目的，但你可以从活动的目标中得到它，比如(click)="onClick($event.toElement.getAttribute('ng-reflect-state'))"
只需要获取复选框被点击时的状态。 $event.toElment 返回null :268 -1 257 null

标签： angular typescript angular-material2

【解决方案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>

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

【讨论】：