使用 ngModel 在检索选定的 material 单选按钮值时获取第一个值 "undefined"

Question

我正在使用 angular 6 和 material 组件，其中我制作了一个单选按钮组，其中有两个选项提供给 select，我在其中使用 ngModel 来获取 selected 单选按钮的值，但在第一次单击时获取未定义的值，并在单击另一个选项时获取先前的 selected 值请帮助代码如下：-

App.Component.html

<mat-radio-group formControlName="offers" [(ngModel)]="offers">
<mat-radio-button value="freeShipping" (click)="offerStatus(offers)">Free shipping</mat-radio-button>
<mat-radio-button value="nextDay" (click)="offerStatus(offers)"> Next Day</mat-radio-button>
</mat-radio-group>

App.component.ts

  offerStatus(data){
  console.log(data);
}

输出

undefined //when selecting any one of the options

freeShipping //when selecting nextDay option

nextDay //when selecting freeShipping

预期输出

freeShipping // when selecting freeShipping

nextDay // when selecting nextDay

Answer 1

使用 change 代替 click

<mat-radio-button value="freeShipping" (change)="offerStatus(offers)">Free shipping</mat-radio-button>

使用 ngModel 在检索选定的 material 单选按钮值时获取第一个值 "undefined"

Getting first value as "undefined" while retrieving selected material radio button value using ngModel

angular-material

angular

angular6