Как получить текущее состояние (выбран или не проверен) углового материала Multiselect

Question

Я использую MatSelect с несколькими вариантами выбора. Я хочу состояние текущего элемента для экс. Текущий выбранный элемент отмечен или не отмечен. На основании состояния мне придется открыть диалоговое окно.

Answer 1

Начиная с Angular 6, это то, что работало для меня (проверено только в Safari).

HTML

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

TS

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

Answer 2

В mat-option вы можете добавить событие клика и зарегистрировать его для отслеживания:

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

А в компоненте .ts:

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

Answer 3

Метод Easist просто передайте $ 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

Если бы у них была какая-то документация ...

... Ой, подождите!

selected: MatOption | MatOption[] Текущий выбранный вариант.

EDIT

В HTML

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

В ТС

@ViewChild('select') select: MatSelect;

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

Теперь у вас есть выбранные значения (и, следовательно, невыбранные значения)