angular - 根据条件显示不同的视图
问题描述
如果我的 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()
}
解决方案
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>
推荐阅读
- r - 有没有办法循环多个数据帧以删除相同的列?
- java - MongoTemplate Vs MongoRepository 用于特定用例
- docker - 无法连接到 docker 中的 Airflow 网络服务器
- java - 有没有办法在不使用 Java 进行强制转换的情况下返回泛型超类型?
- java - 从排序列表
,给定一个未排序的子群,求子群的最小值 - javascript - 在Javascript中将变量从一个脚本检索到另一个脚本
- sql - 从数据库中获取数据并显示在服务器上
- c - 从 MPI 中的文本文件中读取
- powerbi - 如果我想将 Power BI 函数用作报表的轴值,它的返回类型应该是什么
- r - 在单独的数据框中使用日期范围过滤 - R