angular - Material 单选按钮更改事件Angular 4

Question

我正在尝试使用 md-radio-buttons 的更改输出，如下所示:

<md-radio-group [(ngModel)]="selected">
    <md-radio-button *ngFor="let a of array" [value]="a"
                 (change)="radioChange()">
        {{a}}
    </md-radio-button>
</md-radio-group>

TS:

selected: string;
filter: any;

radioChange() {
    this.filter['property'] = selected;
    console.log(this.filter);
}

这似乎总是落后于单选按钮一步。即，当将选择从 radio A 更改为 radio B 时，它将控制台记录 radio A 的值。

如有任何帮助，我们将不胜感激。

干杯，

P

Answer 1

For Material version >= 6, refer to the following answer: https://stackoverflow.com/a/46037191/1791913

---

以下答案适用于 Material 版本 < 6:

发生这种情况是因为在更新模型之前触发了 change 事件。所以您的 selected 属性具有以前的值。将您的代码更改为以下以在 (change) 上获取事件:

<md-radio-group [(ngModel)]="selected">
    <md-radio-button *ngFor="let a of array" [value]="a" (change)="radioChange($event)">
        {{a}}
    </md-radio-button>
</md-radio-group>

...在您的类里面，执行以下操作:

import { MdRadioChange } from '@angular/material';
// ...

radioChange(event: MdRadioChange) {
    this.filter['property'] = event.value;
    console.log(this.filter);
}

链接到 working demo .