Question

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

我现在只学习离子，可能正在做一些正确的愚蠢行为。如果您需要任何其他详细信息，请告诉我。

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

我的问题： -

[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>）仅显示按钮，没有其他内容

1 个答案: