如果我在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()
}
您可以在视图中使用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>