I am encountering an issue with the ion-radio component in Ionic 2.
The problem is that when the component retrieves data from a service using HTTP and assigns it to the data property within the ngOnInit lifecycle hook, the radio buttons are not able to be selected.
Template:
<ion-list class="rooms" padding radio-group>
<ion-item *ngFor="let r of data?.rooms">
<ion-label >{{ r?.name }}</ion-label>
<ion-radio [checked]="selectedRoom == r?.id" [value]="r?.id"></ion-radio>
</ion-item>
</ion-list>
Component:
import { Component, OnInit } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
import { BookConfirmPage } from '../bookconfirm/bookconfirm';
import { RoomDetailPage } from '../roomdetail/room';
import { HotelService } from '../../providers/hotel/hotelservice';
@Component({
selector: 'page-hotel-detail',
templateUrl: 'hotel.html',
providers: [HotelService]
})
export class HotelDetailPage implements OnInit {
public data;
public selectedRoom: number;
constructor(
private navCtrl: NavController,
private hotelServ: HotelService,
private navParams: NavParams
) { }
ngOnInit(): void {
// You need an interface to make the data readable and consistent.
// This method is not recommended for production. For learning purposes only.
let id = this.navParams.get('id');
let idRoom = this.navParams.get('idRoom');
this.hotelServ.get(id).then(res => {
this.data = res;
//console.log(res);
})
.catch(err => console.log(err));
this.selectedRoom = idRoom;
}
showBookConfirm(id) {
console.log(this.selectedRoom)
this.navCtrl.push(BookConfirmPage, { 'id': id });
}
showRoomDetail(id) {
this.navCtrl.push(RoomDetailPage, { 'id': id });
}
}
Edited:
This is simply an interpolation issue in my code. Just change the template to use [value]="r?.id".