*ngIf 用于异步服务功能
*ngIf for async service function
我从 IONIC+Javascript+Async 函数开始,但遇到了一个问题。
我有一个 "index" 页面,它将从服务加载数据并使用 ngFor 显示它。如果没有数据,我想显示一个离子行,上面写着没有找到媒体。仅当服务中没有数据时才会显示。
这是我的相关部分 home.page.ts
constructor(private mediaSvc: MediaService){
this.loading = true;
}
ionViewDidEnter() {
console.log("ionViewDidEnter before getMedia - loading ", this.loading);
this.getMedia();
console.log("ionViewDidEnter after getMedia - loading ", this.loading);
}
getMedia() {
console.log("getMedia inside");
this.mediaSvc.getMedia().then(result => {
this.arr = result || [];
this.loading = false;
console.log("getMedia inside promisse - loading ", this.loading);
});
}
这里是我里面的相关代码home.page.html
<ion-grid class="ion-no-padding">
<ion-row>
<ion-col>
<ion-list>
<ion-item *ngFor="let data of arr">
<ion-icon name="film" slot="start"></ion-icon>
<div tappable>
<h2>
<strong>{{data.name}}</strong> / Episode:
{{data.episode}}
</h2>
<h3>
Film Period:
<em>
<strong>{{ data.startDate | date: "MMMM dd, yyyy"}}</strong>
to
<strong>{{ data.endDate | date: "MMMM dd, yyyy"}}</strong>
</em>
</h3>
</div>
<div slot="end">
<ion-button fill="clear" (click)="showOptions(data)">
<ion-icon name="ellipsis-vertical-sharp"></ion-icon>
</ion-button>
</div>
</ion-item>
</ion-list>
</ion-col>
</ion-row>
<ion-row *ngIf="!loading">
<ion-col class="ion-text-center">
<ion-text><h2>No media found!</h2></ion-text>
</ion-col>
</ion-row>
</ion-grid>
里面media.service.ts
getMedia() {
return new Promise<any[]>(resolve => {
let arr = [];
let fakeData = {};
fakeData = {
id: 1,
name: "Test 1",
description: "This is a fake test",
startDate: "January 1, 2020",
endDate: "",
episode: 1,
slates: []
};
arr.push(fakeData);
fakeData = {
id: 2,
name: "Test 2",
description: "This is a fake test 2",
startDate: "January 1, 2010",
endDate: "December 31, 2011",
episode: 1,
slates: []
};
arr.push(fakeData);
resolve(arr);
});
}
发生的事情是,由于 mediaSvc.getMedia 是异步的,在我测试 !loading 时,它仍然是正确的。我需要它 false(不再加载,我在 getMedia 上将它设置为 false)。
我得到的结果总是在加载数据后显示 "No Media Found"。
我的控制台日志中有这个结果。
ionViewDidEnter before getMedia - loading true
getMedia inside
ionViewDidEnter after getMedia - loading true
getMedia inside promisse - loading false
我该如何处理?我的意思是,如果 true/false 是异步的,我该如何测试这些条件?另外,这种情况还有其他处理方法吗?
我从这个堆栈开始,所以我可能会遗漏一些简单的东西。
当您检索数据时,然后将 loading 设置为 false。在 html 中,您设置了 if 语句,以便如果加载为假,它会显示 'No media found' 消息。
所以这是逻辑的正确行为。
您希望在没有退货的情况下显示消息。这可以通过以下方式完成:
<ion-row *ngIf="!arr || arr.length == 0">
<ion-col class="ion-text-center">
<ion-text><h2>No media found!</h2></ion-text>
</ion-col>
</ion-row>
查看StackBlitz demo(注释掉media.service中的所有arr.push(fakeData);行以查看'No items found'消息) .
试试这个
constructor() {
this.loading = true;
}
在html
<ion-row *ngIf="loading">
<ion-col class="ion-text-center">
<ion-text><h2>No media found!</h2></ion-text>
</ion-col>
</ion-row>
我从 IONIC+Javascript+Async 函数开始,但遇到了一个问题。
我有一个 "index" 页面,它将从服务加载数据并使用 ngFor 显示它。如果没有数据,我想显示一个离子行,上面写着没有找到媒体。仅当服务中没有数据时才会显示。
这是我的相关部分 home.page.ts
constructor(private mediaSvc: MediaService){
this.loading = true;
}
ionViewDidEnter() {
console.log("ionViewDidEnter before getMedia - loading ", this.loading);
this.getMedia();
console.log("ionViewDidEnter after getMedia - loading ", this.loading);
}
getMedia() {
console.log("getMedia inside");
this.mediaSvc.getMedia().then(result => {
this.arr = result || [];
this.loading = false;
console.log("getMedia inside promisse - loading ", this.loading);
});
}
这里是我里面的相关代码home.page.html
<ion-grid class="ion-no-padding">
<ion-row>
<ion-col>
<ion-list>
<ion-item *ngFor="let data of arr">
<ion-icon name="film" slot="start"></ion-icon>
<div tappable>
<h2>
<strong>{{data.name}}</strong> / Episode:
{{data.episode}}
</h2>
<h3>
Film Period:
<em>
<strong>{{ data.startDate | date: "MMMM dd, yyyy"}}</strong>
to
<strong>{{ data.endDate | date: "MMMM dd, yyyy"}}</strong>
</em>
</h3>
</div>
<div slot="end">
<ion-button fill="clear" (click)="showOptions(data)">
<ion-icon name="ellipsis-vertical-sharp"></ion-icon>
</ion-button>
</div>
</ion-item>
</ion-list>
</ion-col>
</ion-row>
<ion-row *ngIf="!loading">
<ion-col class="ion-text-center">
<ion-text><h2>No media found!</h2></ion-text>
</ion-col>
</ion-row>
</ion-grid>
里面media.service.ts
getMedia() {
return new Promise<any[]>(resolve => {
let arr = [];
let fakeData = {};
fakeData = {
id: 1,
name: "Test 1",
description: "This is a fake test",
startDate: "January 1, 2020",
endDate: "",
episode: 1,
slates: []
};
arr.push(fakeData);
fakeData = {
id: 2,
name: "Test 2",
description: "This is a fake test 2",
startDate: "January 1, 2010",
endDate: "December 31, 2011",
episode: 1,
slates: []
};
arr.push(fakeData);
resolve(arr);
});
}
发生的事情是,由于 mediaSvc.getMedia 是异步的,在我测试 !loading 时,它仍然是正确的。我需要它 false(不再加载,我在 getMedia 上将它设置为 false)。
我得到的结果总是在加载数据后显示 "No Media Found"。
我的控制台日志中有这个结果。
ionViewDidEnter before getMedia - loading true
getMedia inside
ionViewDidEnter after getMedia - loading true
getMedia inside promisse - loading false
我该如何处理?我的意思是,如果 true/false 是异步的,我该如何测试这些条件?另外,这种情况还有其他处理方法吗?
我从这个堆栈开始,所以我可能会遗漏一些简单的东西。
当您检索数据时,然后将 loading 设置为 false。在 html 中,您设置了 if 语句,以便如果加载为假,它会显示 'No media found' 消息。
所以这是逻辑的正确行为。
您希望在没有退货的情况下显示消息。这可以通过以下方式完成:
<ion-row *ngIf="!arr || arr.length == 0">
<ion-col class="ion-text-center">
<ion-text><h2>No media found!</h2></ion-text>
</ion-col>
</ion-row>
查看StackBlitz demo(注释掉media.service中的所有arr.push(fakeData);行以查看'No items found'消息) .
试试这个
constructor() {
this.loading = true;
}
在html
<ion-row *ngIf="loading">
<ion-col class="ion-text-center">
<ion-text><h2>No media found!</h2></ion-text>
</ion-col>
</ion-row>