材质单选按钮更改事件角度4

Question

我正在尝试使用md-单选按钮的更改输出，如下所示：

<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时，它将console.log单选A的值。

任何帮助都将不胜感激。

干杯,

P

Answer 1

之所以会发生这种情况，是因为在模型更新之前触发了更改事件。因此，您的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

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

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