Ionic 2 单选按钮 (<ion-radio>) 仅显示按钮，没有其他内容

Question

我正在尝试使用 ion-list 和 ion-radio 指令实现带有单选按钮的列表。我希望下面的代码是不言自明的。

我现在只是在学习 ionic，可能会做一些愚蠢的事情。如果您需要任何其他详细信息，请告诉我。

这里是My Output。知道我做错了什么吗？

我的html:-

<ion-navbar *navbar>

  <button menuToggle>
    <ion-icon name="menu"></ion-icon>
  </button>
  <ion-title>Select your location</ion-title>
</ion-navbar>

<ion-content padding class="select-location">
  <ion-list radio-group>
    <ion-list-header *ngIf="!selectLocation">
      Where are you located?</ion-list-header>
    <ion-list-header *ngIf="selectLocation">
      Selected Location:
      <p [innerText]="selectLocation.name"></p>
    </ion-list-header>
    <ion-radio
      *ngFor="let location of locations"
      (select)="selectLocation = location"
      [value]="location.code"
    >{{location.name}}
    </ion-radio>
  </ion-list>
</ion-content>

我的 ts:-

[import {Component} from '@angular/core';
import {NavController} from 'ionic-angular';

/*
  Generated class for the SelectLocationPage page.

  See http://ionicframework.com/docs/v2/components/#navigation for more info on
  Ionic pages and navigation.
*/
@Component({
  templateUrl: 'build/pages/select-location/select-location.html',
})
export class SelectLocationPage {
  public locations;
  constructor(public nav: NavController) {
    this.locations = \[
      {
        code: 1,
        name: 'Powai',
        pincode: '400076'
      },
      {
        code: 2,
        name: 'Chandivali',
        pincode: '400072'
      },
      {
        code: 3,
        name: 'Dadar',
        pincode: '400023'
      },
      {
        code: 4,
        name: 'Colaba',
        pincode: '400001'
      }
    \];
  }
}][1]

Answer 1

这是一些看起来很奇怪的代码；它应该看起来更像 this:

 <ion-list radio-group [(ngModel)]="selectLocationName">
     <ion-list-header *ngIf="!selectLocationName">
         Where are you located?</ion-list-header>
     <ion-list-header *ngIf="selectLocationName">
         Selected Location:
         <p> {{ selectLocationName }}</p>
     </ion-list-header>
     <ion-item *ngFor="let location of locations">
         <ion-label>{{ location.name }}</ion-label>
         <ion-radio [value]="location.name "</ion-radio>
     </ion-item>
 </ion-list>

Ionic 2 单选按钮 (<ion-radio>) 仅显示按钮，没有其他内容

Ionic 2 Radio button (<ion-radio>) showing only the button and nothing else

html

typescript

ionic2

angular