离子 2 离子无线电错误与环路

Question

我在使用离子 2 离子无线电时遇到了问题。

其思路是：组件从使用 HTTP 的服务获取数据，并将值分配给ngOnInit中的 data 属性，但无法选择单选按钮。

模板：

<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>

元件：

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 {
    // u need a interface to make data readable and consistent.
    // this really unrecomended. for learn 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 });
  }
}

编辑：这只是我的代码中的插值问题。只需更改模板即可。 [valye]="r?.id"

Answer 1

只需更改

<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>

到

<ion-list class="rooms" padding radio-group [(ngModel)]="selectedRoom">
  <ion-card class="room-card" *ngFor="let r of data?.rooms">
    <ion-card-content>
      <div class="left">
        <ion-radio [value]="r?.room_id"></ion-radio>
      </div>
      <div class="right" (click)="showRoomDetail(r?.room_id)">
        <ion-card-title>
          {{ r?.name }} {{ r?.room_id }}
        </ion-card-title>
        <p color="warning">&nbsp;Rp. {{ r?.cost }}</p>
      </div>
    </ion-card-content>
  </ion-card> 
</ion-list>

导致这个只是插值问题，不是来自离子，而是来自我的代码