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

Question

我有多个mat-select ，想知道已单击的mat-option是否已被选中或取消选中。 当(click)被触发时传递的$event.target对象没有我可以使用的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

您可以在<mat-select>上使用selectionChange()事件，这将为您提供您选择的选项。

<mat-select (selectionChange)="foo($event)">

最佳做法是直接从 FormControl 获取更改。 如果您console.log您使用的 FormControl： [formControl]="control" ，您将看到它包含最后选择的选项。 如果您有多个 mat-select，并希望控制它们，我的建议是将它们包装在FormGroup ，然后为每个选择使用属于该FormGroup FormControl 。

Answer 3

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

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

你得到显示的值

Answer 4

您已经在使用表单控件。 您选择的所有选项都在那里，存储在一个数组中：

foo(x) {
  // an array of your selections
  console.log(this.control.value)
}

因此，您无需跟踪它是未选中还是已选中。

演示