材料单选按钮更改事件 Angular 4 [英] Material radio button change event Angular 4

问题描述

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

I am trying to use the change output of an md-radio-buttons as follows:

<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);
}

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

This always seems to be one step behind the radio buttons. i.e. when changing selection from radio A to radio B, it will console.log the value of radio A.

任何帮助将不胜感激.

干杯，

P

推荐答案

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

This happens because the change event is fired before the model has been updated. So your selected property has the previous value. Change your code to following to get the event on (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>

...并在您的班级中执行以下操作:

... and in your class, do the following:

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

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

链接到工作演示.

这篇关于材料单选按钮更改事件 Angular 4的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！