Angular Флажок материала не представляет одностороннее связанное значение

Question

При использовании односторонней привязки данных с флажком, флажок флажка не представляет правильное значение связанного значения. Его можно проверить и снять независимо со значением.

Как я могу решить эту проблему?

Вот код:

<mat-checkbox
    class="example-margin"
    (click)="onSelect(0)"
    [checked]="selected === 0">
</mat-checkbox>
<br>
<mat-checkbox
    class="example-margin"
    (click)="onSelect(1)"
    [checked]="selected === 1">
</mat-checkbox> 
<h1>selected: {{selected}}</h1>

    export class CheckboxConfigurableExample {
      checked = true;

      selected: number;

      onSelect(i: number) {
        this.selected = i;
      }
    }

Вот стекаблиц:

https://stackblitz.com/edit/angular-o636xe

Answer 1

Чтобы заставить его работать, вы можете просто изменить (click) на (change):

<mat-checkbox
    class="example-margin"
    (change)="onSelect(0)"
    [checked]="selected === 0">
</mat-checkbox>
<br>
<mat-checkbox
    class="example-margin"
    (change)="onSelect(1)"
    [checked]="selected === 1">
</mat-checkbox>

DEMO

Answer 2

, если вы просто добавите параметр $event и в вызове функции event.preventDefault() он будет работать нормально.

, если кто-то может объяснить это, было бы здорово.

https://stackblitz.com/edit/angular-o636xe-wdjb31