0

我从 IONIC+Javascript+Async 函数开始，并且遇到了我遇到的情况。

我有一个“索引”页面，它将从服务加载数据并使用 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 是异步的，在我测试是否加载时，它仍然是正确的。我需要它是假的（不再加载，我在我的 getMedia 上将它设置为假）。

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

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

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

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

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

4

2 回答 2

1

当您检索数据时，您将加载设置为 false。在 html 中，您设置了 if 语句，因此如果加载为 false，它将显示“未找到媒体”消息。

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

如果没有返回项目，您希望消息显示。这可以通过以下方式完成：

<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 演示（注释掉 media.service 中的所有arr.push(fakeData);行以查看“未找到项目”消息）。

于 2020-02-26T20:00:58.247 回答
0

试试这个

 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>
于 2020-02-26T20:05:45.290 回答