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

这似乎总是落后于单选按钮一步.即当从无线电A改变选择到无线电B时,它将控制台.log的无线电A的值.

任何帮助将非常感激.

干杯,

P

Answer 1

发生这种情况是因为在更新模型之前触发了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);
}

链接到工作演示.

Answer 2

将name属性和change事件设置为mat-radio-group.html文件:

<mat-radio-group 
    name="radioOpt1" 
    [(ngModel)]="selectedRadio"
    (change)="radioChange($event)">
    <mat-radio-button *ngFor="let opt of options" 
        [value]="opt">{{opt}}</mat-radio-button>
</mat-radio-group>

然后在component.ts文件中:

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

radioChange($event: MatRadioChange) {
    console.log($event.source.name, $event.value);

    if ($event.source.name === 'radioOpt1') {
        // Do whatever you want here
    }
}