* ngIf для asyn c сервисная функция

Question

Я начинаю с функций IONIC + Javascript + Asyn c и сталкиваюсь с ситуацией, в которой я застрял.

У меня есть страница «index», которая загружает данные из службы и показывает их с ngFor. Если данных нет, я хочу показать строку с надписью No Media Found. Только если нет данных от службы, она будет показана.

Вот моя соответствующая часть 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);
    });
  }

Что происходит, так как mediaSv c .getMedia asyn c, в то время, когда я проверяю, если! загрузка, это все еще верно. Мне нужно значение false (больше не загружается, я установил значение false на моем getMedia).

Результаты, которые я получаю, всегда показывают «Нет носителя найден» после загрузки данных.

У меня есть этот результат с логами консоли.

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

Как мне справиться с этим? Я имею в виду, как я могу проверить эти условия для истинного / ложного, если это асин c? Кроме того, есть ли другой подход к этой ситуации?

Я начинаю с этого стека, поэтому я могу упустить что-то простое.

Answer 1

При получении данных вы устанавливаете loading в false. В html у вас есть оператор if, установленный таким образом, что, если загрузка ложна, он отображает сообщение «Нет носителя найден».

Так что это правильное поведение для логики c.

Вы хотите, чтобы сообщение показывалось, если не было возвращено ни одного элемента. Это можно сделать с помощью:

<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 (закомментировать все arr.pu sh (fakeData); строк в media.service для см. сообщение «Предметы не найдены».

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>