Question

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

ui.jqgrid.css

TS：

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

这似乎总是在单选按钮后面一步。即，当从无线电A改变选择到无线电B时，它将控制台。记录无线电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);
}

链接到working demo。

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

材质单选按钮更改事件Angular 4

2 个答案: