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

【问题标题】：Material radio button change event Angular 4材质单选按钮更改事件Angular 4
【发布时间】：2021-07-11 01:07:55
【问题描述】：

我正在尝试使用 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 时，它将 console.log 收音机 A 的值。

任何帮助将不胜感激。

干杯，

【问题讨论】：

广播列表使用 [(ngModel)] 示例应用程序freakyjolly.com/how-to-show-radio-input-listing-in-angular-6

标签： angular angular-material angular-material2

【解决方案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);
}

链接到working demo。

【讨论】：

太好了，谢谢。这完美地解决了无线电变化问题。不过，似乎仍然没有更新管道。 SO新手，我应该把这个问题一分为二并接受你的回答吗？此外，使用 Angular 2 材质组件传递 $event 的方法是否属于有任何好的教程的更广泛课程的一部分？
使用 Angular 5，您需要从“@angular/material”导入 MatRadioChange，您在 radioChange() 方法中获得的事件是 MatRadioChange 类型，您不必放置（更改）所有垫子单选按钮上的事件。你可以简单地把它放在 mat-radio-group 上。
我不需要添加 MdRadioChange。我正在使用角度 8。
这行得通，但是有没有办法读取事件中无线电组的值？换句话说，如何处理 'change' 事件以使 'selected' 值已经可以访问？谢谢！

【解决方案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
    }
}

【讨论】：