Зачем менять мат-радио-кнопка возвращает обратное значение?

Question

У меня есть переключатель:

<mat-radio-group [ngModel]="model">
    <mat-radio-button *ngFor="let d of ['a', 'b']" [value]="d" (change)="change()">
    {{ d }}
    </mat-radio-button>
</mat-radio-group>

Метод:

public change(): void {
   console.log(this.model);
}

Почему, когда я меняю радио, например, враг нажимает на элемент a, я получаю элемент b в консоль?

Answer 1

Я создал рабочую версию вашего кода в этом StackBlitz .

Сначала измените [ngModel]="model" на [(ngModel)]="model". В настоящее время вы используете одностороннюю привязку шаблона, когда вам нужна двусторонняя привязка шаблона. Проблема заключается в том, что только двусторонняя привязка будет отправлять обновления из шаблона в вашу модель.

Подробнее см. Angular синтаксис привязки .

Во-вторых, Событие change() здесь запускается до обновления модели. Вот почему вы видите, как печатается старое значение. Если вы начнете model без значения, то вы заметите, что ваш исходный код будет печатать undefined в качестве первого вывода.