Question

我从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是异步的，在我测试！loading时，它仍然是正确的。我需要它为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语句，以便如果加载为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 demo（在media.service中注释掉所有 arr.push（fakeData）; 行，以查看“未找到任何项目”消息）。

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用于异步服务功能

2 个答案: