Could someone assist me in pre-selecting the initial radio button from a list of generated radio buttons that can be updated if the user selects a different radio button?
I am encountering an error with my current implementation:
TypeError: Cannot read properties of undefined (reading '0')delivery-dates.model.ts
export interface DeliveryDates {
color: string;
date: string;
date_name: string;
}
cart.page.ts code:
export class CartPage implements OnInit, OnDestroy {
dates: DeliveryDates[];
selectedValue: any;
private datesSubscription: Subscription;
constructor() {
}
ngOnInit() {
this.getDeliveryDates();
this.selectedValue = this.dates[0].date;
}
getDeliveryDates() {
this.datesSubscription =
this.cartService.getDeliveryDates().subscribe(
data => {
this.dates = data;
},
error => {
console.log('Error', error);
});
}
}
cart.page.html
<ion-list class="dates-list">
<ion-radio-group value="{{dates[0]}}" [(ngModel)]="selectedValue">
<ion-item *ngFor="let datum of dates;let i = index" (click)="modal.dismiss()">
<ion-icon name="today-outline"></ion-icon>
<ion-label class="{{datum.color}}">{{datum.date_name}} {{ datum.date }}</ion-label>
<ion-radio slot="end" value="{{ datum.date }}"></ion-radio>
</ion-item>
</ion-radio-group>
</ion-list>