代码之家  ›  专栏  ›  技术社区  ›  Taieb

按条件显示不同的视图

  •  0
  • Taieb  · 技术社区  · 6 年前

    如果我的ngfor上的值为空,我想获得不同的视图

        <ion-select interface="popover" [ngModel]="selectedKidId">
          <ion-option *ngFor="let kid of kids" [value]="kid.id">{{kid.name}}</ion-option>
        </ion-select>
      </ion-item>
    

    这将显示一个孩子的名字列表,如果列表中没有孩子,我想得到一个调用我创建的组件的不同视图。有办法吗?

    非常感谢。

    孩子们。ts

    export class KidsPage {
      selectedKidId: string
      kids: Kid[] = []
      loveAmount: number
    
      constructor(
        public navCtrl: NavController,
        public navParams: NavParams,
        public modalCtrl: ModalController,
        private kidProvider: kidProvider,
      ) {
      }
    
      ionViewDidLoad() {
    
        this.initKids()
      }
    
      initkids() {
        this.kidProvider.getkid().subscribe(
          ({ data }) => {
            this.kids = data['mykids']
            if (this.kids.length > 0) {
              this.selectedKidId= this.kids[0].id
            }
          },
          (error) => {
            console.log(`getKids failed: ${JSON.stringify(error)}`)
          })
        this.kidProvider.subscribeToKids()
      }
    
    1 回复  |  直到 6 年前
        1
  •  1
  •   Pardeep Jain    6 年前

    您可以使用 if-else 在您看来,情况如下:

    <div *ngIf='kids.length'>
      <ion-select interface="popover" [ngModel]="selectedKidId">
        <ion-option *ngFor="let kid of kids" [value]="kid.id">{{kid.name}}</ion-option>
      </ion-select>
    </div>
    <add-kid *ngIf='!kids.length'></add-kid>