使用 NgFor 发出条件警报答案

【问题标题】：Condition Alert with NgFor使用 NgFor 发出条件警报
【发布时间】：2018-04-23 17:29:55
【问题描述】：

如果我的 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>

这将显示一个孩子的名字列表，如果列表中没有孩子，我想弹出一个。有办法吗？

谢谢

kids.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()
  }

【问题讨论】：

*ngIf(kids.length === 0) ... 你想要一个实际的alert 还是在你的 HTML 中显示不同的东西？
或者*ngIf(!kids)如果可以是null
@bugs 如果可能的话，我想展示一个模型。
@Taieb 什么型号？或者你的意思是一个modal？（即this）
@bugs yes sorry modal，像这个ionicframework.com/docs/api/components/modal/ModalController

标签： angular ionic-framework ionic3

【解决方案1】：

当你的数组中没有这样的数据时，只需编写Dialog打开代码

initkids() {
    this.kidProvider.getkid().subscribe(
      ({ data }) => {
        this.kids = data['mykids']
        if (this.kids.length > 0) {
          this.selectedKidId= this.kids[0].id
        } else {
             // ----Open your modal instead -----
        }
      },
      (error) => {
        console.log(`getKids failed: ${JSON.stringify(error)}`)
      })
    this.kidProvider.subscribeToKids()
  }

【讨论】：

非常感谢，就这样。