Получение первого значения как "неопределенного" при получении значения переключателя выбранного материала с использованием ngModel

Question

Я использую угловые 6 и компоненты материала, где я сделал группу переключателей, в которой есть две опции для выбора, в которых я использовал ngModel, чтобы получить значение выбранной кнопки переключателя, но получить неопределенное значение при первом нажатии и получить предыдущее выбранное значение при выборе другой опции. Пожалуйста, введите код помощи: -

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>