如何知道是否从单击事件中选择了垫子选项？

Question

我有一个倍数mat-select，想知道mat-option被点击的那个是被选中还是被取消选中。触发$event.target时传递的对象(click)没有selected我可以使用的属性。

<mat-form-field>
    <mat-select [formControl]="control" multiple>
        <mat-option 
          *ngFor="let option of options" 
          [value]="option"
          (click)="foo($event)"
        >
        {{ option }}
        </mat-option>
    </mat-select>
</mat-form-field>

public foo(event) {
    const hasBeenChecked = ???? // How do I know if my clicked option has been checked or unchecked?
}

提前致谢

Answer 1

您可以通过从MatOption对象中读取它来获取单击选项的选定状态，如下所示：

<mat-option #matOption (click)="foo(matOption.selected)"></mat-option>

StackBlitz 示例

Answer 2

使用 Angular 11.0 可以在 mat-option 标签中添加 (click) 事件，如下所示：

<mat-option (click)="handleSelected(option)" *ngFor="let option of   filteredOptions | async" [value]="option">

然后你就得到了显示的值