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>

selected: string;
filter: any;

radioChange() {
    this.filter['property'] = selected;
    console.log(this.filter);
}

这似乎总是落后于单选按钮，即当从单选按钮A更改选择到单选按钮B时，它将console.log单选按钮A的值。

任何帮助都将不胜感激。

干杯，

P

- Batters

---

使用 [(ngModel)] 的电台列表示例应用程序 http://www.freakyjolly.com/how-to-show-radio-input-listing-in-angular-6/ - Code Spy

Answer 1

对于 Material 版本号 >= 6，请参考以下答案：https://dev59.com/nVYO5IYBdhLWcg3wTfxv#46037191

---

以下答案适用于 Material 版本号 < 6：

这是因为更改事件在模型更新之前就已经触发了。因此，您的 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);
}

链接到工作演示。

- FAISAL

---

太好了，谢谢。这完美地解决了无线电更改问题。但似乎仍然没有更新管道。我是SO的新手，我应该将这个问题分成两个并接受你的答案吗？ 此外，使用Angular 2材料组件传递$event的方法是否属于更广泛的课程，并且有任何好的教程可以参考？ - Batters

在使用 Angular 5 版本时，您需要从 '@angular/material' 导入 MatRadioChange。在 radioChange() 方法中获得的事件类型为 MatRadioChange，您无需在所有 mat-radio-button 上放置 (change) 事件，只需将其放置在 mat-radio-group 上即可。 - herve

我不需要添加MdRadioChange。我正在使用Angular 8。 - romal tandel

这段代码可以运行，但有没有一种方法在事件中读取单选按钮组的值？换句话说，如何处理“change”事件，以便可以立即访问“selected”值？谢谢！ - Budda

Answer 2

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

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

- Matheus Abreu