ionic 2 带环的离子无线电错误

Question

我在使用 ionic 2 ion-radio 时遇到了问题。

想法是：组件从使用 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>

这只是插值问题，不是来自 ionic，而是来自我的代码