如何获取Angular Material Multiselect的当前状态（Is Checked或Unchecked）

Question

我正在使用MatSelect和多个项目选择。我想要当前项目的状态为ex。选中或取消选中当前单击的项目。在国家的基础上，我将不得不打开一个对话框。

Answer 1

如果他们只有一些文件......

... Oh Wait !

selected: MatOption | MatOption[]当前选择的选项。

编辑

在HTML中

<mat-select #select (change)="x()" ...>
  <option *ngFor="let x of y" ...></option>
</mat-select>

在TS中

@ViewChild('select') select: MatSelect;

x() {
  console.log(this.select.selected);
}

现在您有所选的值（因此，未选择的值）

Answer 2

在mat-option上，您可以添加单击事件并将其记录到跟踪：

<mat-option value="abc" (click)="onOptionClick($event)">abc</mat-option>

在.ts组件中：

onOptionClick(event){
console.log(event.target.selected);
}

Answer 3

最简单的方法只需将$ event.target.selected传递给.ts中的方法，您就可以根据状态打开一个对话框。

在.html

<mat-option value="val" (click)="onClick($event.target.selected)">val</mat-option>

在.ts文件中

onOClick(isSelected){
   if(isSelected){
    //selected state
   }else{
   //not selected state
   }
}

Answer 4

从Angular 6开始，这对我有用（仅在Safari中测试）。

HTML

<input (change)="yourFunction($event)" type="checkbox" name="your-name">

TS

private yourFunction(event)
{
   console.log(event.target.checked);
}