Ionic 3 Angular NgIf

Question

I have an error when I create my ngIf in the img tag here is my code:

<img name="{{i}}" [(ngModel)]="jaquette" [src]="jaquette" *ngIf="results.poster_path as 'null' || ''; then jaquette == noJaquette else jaquette == themoviedbServicesProvider?.baseUrlConfig + results.poster_path" />

Do you have an idea of the problem ? Thank you

Thank you for answering, ok I put you a little more code. For information, if I remove the NgIf everything works correctly.

<ion-grid>
    <ion-row>
      <ion-col col-sm>
        <ion-card *ngFor="let results of themoviedbServicesProvider?.searchMovie?.results; let i = index" (click)="choiceGetMovie(results.id, language)">
          <img name="{{i}}" [(ngModel)]="jaquette" [src]="jaquette" *ngIf="results.poster_path as 'null' || ''; then jaquette == noJaquette else jaquette == themoviedbServicesProvider?.baseUrlConfig + results.poster_path" />
          <ion-card-content>
            <ion-card-title>
              {{ results.title }}
            </ion-card-title>
          </ion-card-content>
        </ion-card>
      </ion-col>
    </ion-row>
  </ion-grid>

there are many possible errors. please provide some more code or at least the required part. — amitdigga, Mar 17 '18 at 11:48
The expression ngIf is not corrrect. Move it to a method wich returns true or false. Then in ngif is for template names which you don't seem to have anyway — Vega, Mar 17 '18 at 12:15
removing **|| ''** I have no more mistakes which gives -> `` however, I do not understand your last sentence **Vega** — marilyn, Mar 17 '18 at 12:30
I meant that 'then' in *ngIf is not used in the same way as in typescript/js. See : https://angular.io/api/common/NgIf#using-non-inlined-then-template — Vega, Mar 17 '18 at 12:48

score 0 · Answer 1 · answered Mar 17 '18 at 12:28

You should have made an edit to question instead of answering it. Ok jaquette is your image src address. I think you are

*ngIf="results.poster_path as 'null' || ''; then jaquette == noJaquette else jaquette == themoviedbServicesProvider?.baseUrlConfig + results.poster_path"

trying to change jaquette based on if-then-else.

Now that's not how *ngIf then else work. then and else are for template reference.

Define two functions in component class.

 showImage(results) { return true }//or false based on results
  getJaqutte(results) {
     return results+'your logic'; 
  }

then use like

  <img name="{{i}}" [src]= "getJaqutte(results)" *ngIf="showImage(results)" />

unfortunately I can not do it because "results.poster_path" can only be read in the html part of the asyncrone. If no, I would have done it. in ionic the router module does not work. — marilyn, Mar 17 '18 at 12:47

score 0 · Accepted Answer · answered Mar 17 '18 at 18:26

Instead of putting "-1" stupidly, I found the solution. Thanks anyway to the people who answered. Here's how I solved my problem.

 <ion-grid>
    <ion-row>
      <ion-col col-sm>
        <ion-card *ngFor="let results of themoviedbServicesProvider?.searchMovie?.results; let i = index" (click)="choiceGetMovie(results.id, language)">
          <ng-container *ngIf="themoviedbServicesProvider.baseUrlConfig + results.poster_path === 'http://image.tmdb.org/t/p/w300null'; then noJaquette else realJaquette"></ng-container>
            <ng-template #realJaquette><img name="{{i}}" [src]="themoviedbServicesProvider.baseUrlConfig + results.poster_path" /></ng-template>
            <ng-template #noJaquette><img name="{{i}}" src="../../assets/imgs/no-image.PNG" /></ng-template>
          <ion-card-content>
            <ion-card-title>
              {{ results.title }}
            </ion-card-title>
          </ion-card-content>
        </ion-card>
      </ion-col>
    </ion-row>
  </ion-grid>

Ionic 3 Angular NgIf

2 Answers2