材质单选按钮更改事件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

推荐答案

之所以会发生这种情况，是因为在更新模型之前触发了change事件.因此，您的selected属性具有先前的值.将您的代码更改为following，以在(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屋！