CODEWITHSUNDEEP
androidangularionic-frameworkionic3
myura5
myura5

Reputation: 87

ionic ngIf return statement looping forever

I want to check ngIf statement if true then it show icon that I get from webservices, but when I try build it and run it on android phone it seems that function is looping forever.

Here's my code.

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";
          }
    );
    }

I don't have idea why it don't work, can someone help?

Upvotes: 1

Views: 206

Answers (3)

R. Viral
R. Viral

Reputation: 396

Answer of your 1st question why its calling multi times so first wrote in ng-for that's why its calling every time of iteration, second ng-if always looking for change detection when something change in modal or variable its triggers. so if you want to check only once image available or not write code like this...

<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';
      }
);
}

Upvotes: 0

Suresh Kumar Ariya
Suresh Kumar Ariya

Reputation: 9764

You can convert promise to observable, so that in template *ngIf we can access the value using 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";
          }
    ));
    }

Template:

<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>

Upvotes: 0

Sajeetharan
Sajeetharan

Reputation: 222582

Your checkIcon is not returning anything, it should return the result inorder to get ngIf working, add a return in front of the call

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

Upvotes: 1

Related Questions