ионный ngIf оператор возврата зацикливается навсегда

Question

Я хочу проверить утверждение ngIf, если оно истинно, тогда он показывает значок, который я получаю от веб-сервисов, но когда я пытаюсь собрать его и запустить на телефоне Android, кажется, что функция зацикливается навсегда.

Вот мой код.

HTML:

<ion-content>
  <ion-list>
    <ion-item *ngFor="let periode of items" (click)="dismiss(periode)">
      <ion-avatar item-start>
        <img *ngIf="checkIcon(periode.img)=='1'" class="image-icon" src="{{periode.img}}" style="border-radius:0%;">
        <img *ngIf="checkIcon(periode.img)=='0'" class="image-icon" src="assets/imgs/home/App-Icon.png" style="border-radius:0%;">
      </ion-avatar>
      <button ion-item value="{{periode.Productid}}"></button>
      <ion-label><a style="color:#838383;font-size:13px;font-weight:400">{{ periode.Productdesc }}</a> </ion-label>
    </ion-item>
  </ion-list>
</ion-content>

TS:

checkIcon(icoimg:any) {
    var vars;

        this.file.checkFile('file:///android_asset/www/', icoimg).then(
          (files) => {
        return vars === "1";
          }
    ).catch (
          (err) => {
        return vars === "0";
          }
    );
    }

Понятия не имею, почему это не работает, кто-то может помочь?

Answer 1

Вы можете преобразовать обещание в наблюдаемое, чтобы в шаблоне * ngIf мы могли получить доступ к значению с помощью async.

import { from } from 'rxjs';
  checkIcon(icoimg:any) {
    var vars;

        return from(this.file.checkFile('file:///android_asset/www/', icoimg).then(
          (files) => {
        return vars === "1";
          }
    ).catch (
          (err) => {
        return vars === "0";
          }
    ));
    }

Шаблон:

<ion-avatar item-start>
        <img *ngIf="(checkIcon(periode.img) | async) =='1'" class="image-icon" src="{{periode.img}}" style="border-radius:0%;">
        <img *ngIf="(checkIcon(periode.img) | async) == '0'" class="image-icon" src="assets/imgs/home/App-Icon.png" style="border-radius:0%;">
      </ion-avatar>

Answer 2

Ответ на ваш 1-й вопрос, почему его вызов несколько раз, так что сначала он написал в ng, потому что он вызывает каждый раз при итерации, второй ng, если всегда ищет change detection, когда что-то меняется в модальной или переменной, его триггеры.так что если вы хотите проверить только один раз доступное изображение или не писать код, подобный этому ...

<ion-avatar item-start>
    <img (load)="checkIcon($event, periode.img)" class="image-icon" src="{{periode.img}}" style="border-radius:0%;">
  </ion-avatar>

Ts Side

checkIcon(event,icoimg){
   this.file.checkFile('file:///android_asset/www/', icoimg).then(
      (files) => {
     event.target.style.display = 'block';
      }
).catch (
      (err) => {
     event.target.style.display = 'none';
      }
);
}

Answer 3

Ваш checkIcon ничего не возвращает, он должен вернуть результат в порядке, чтобы заставить работать ngIf, добавить возврат перед вызовом

return this.file.checkFile('file:///android_asset/www/', icoimg).then