*ngIf 用于异步服务功能

Question

我从 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>&nbsp;/&nbsp;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 是异步的，我该如何测试这些条件？另外，这种情况还有其他处理方法吗？

我从这个堆栈开始，所以我可能会遗漏一些简单的东西。

Answer 1

当您检索数据时，然后将 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'消息） .

Answer 2

试试这个

 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>

*ngIf 用于异步服务功能

*ngIf for async service function

javascript

ionic-framework

angular

ionic5