javascript - *ngIf 用于异步服务函数

Question

我从 IONIC+Javascript+Async 函数开始，但遇到了一种困境。

我有一个“索引”页面，它将从服务加载数据并使用 ngFor 显示它。如果没有数据，我想显示一个 ionic 行，表示未找到媒体。仅当服务中没有数据时才会显示。

这是我的 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 时，它仍然是 true。我需要它为 false (不再加载，我在 getMedia 上将其设置为 false)。

加载数据后，我得到的结果始终显示“未找到媒体”。

我的控制台日志有这个结果。

ionViewDidEnter before getMedia - loading  true
getMedia inside
ionViewDidEnter after getMedia - loading  true
getMedia inside promisse - loading  false

我该如何处理这个问题？我的意思是，如果是异步的，我如何测试这些条件的真/假？此外，对于这种情况还有其他方法吗？

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

Answer 1

当您检索数据时，您可以将“loading”设置为 false。在 html 中，您设置了 if 语句，以便在加载错误时显示“未找到媒体”消息。

所以这是逻辑的正确行为。

您希望在没有退回元素时显示该消息。这可以通过以下方式完成:

<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); 行以查看“未找到项目”消息)。