Ionic Runtime Error: _v.context.$implicit.image is null

Question

I'm creating an Android app to view details about TV Series'. I'm new Ionic and I did that crash course at Ionic Academy. Some of the values recieved by the API calls are null. I want to show "image not found" at those results.
I tried to use *ngIf it didn't work. This is my current code.

episode.ts

import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import { Component, Directive, Input } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';

@IonicPage()
@Component({
  selector: 'page-episode',
  templateUrl: 'episode.html',
})
@Directive({
    selector: 'img[src]',
    host: {
      '[src]': 'checkPath(src)',
      '(error)': 'onError()'
    }
})
export class EpisodePage {
  season: any;
  episodes:Observable<any>;
  @Input() src:string;
  public defaultImg: string = './app/assets/imgs/notfound.png';

  public onError() {
    return this.defaultImg;
  }
  public checkPath(src) {
    return src ? src : this.defaultImg;
  }

  constructor(public navCtrl: NavController, public navParams: NavParams, public httpClient:HttpClient) {
    this.season = this.navParams.get('season');
    this.episodes = this.httpClient.get('http://api.tvmaze.com/seasons/' + this.season.id + '/episodes');
    this.episodes
      .subscribe(data => {
        console.log('my data: ', data);
      })
  }

  openDetails(show, season, episode) {
    this.navCtrl.push('PlayerPage', { show: show, season: season, episode: episode });
  }

}

This is the HTML of that page
episode.html

<ion-header>
  <ion-navbar>
    <ion-title>{{season.episodeOrder}} Episodes</ion-title>
  </ion-navbar>
</ion-header>
<ion-content>
  <ion-card>
    <ion-grid ion-item *ngFor="let episode of (episodes|async)">
      <ion-row>
        <ion-col col-12>
          <img src="{{episode?.image.original}}" alt="Image not available" onError="this.src='./app/assets/imgs/notfound.png';" cache/>
        </ion-col>
        </ion-row>
        <ion-row>
        <ion-col col-auto>
          <button ion-button full (click)="openDetails(episode)">{{episode.name}}</button>
        </ion-col>
      </ion-row>
    </ion-grid>
  </ion-card>
</ion-content>

The pages where the images are available are showing the images. This error pops out only on the pages where even one of the episode's img is null.

How to show "not found" at the place when I recieve null as a reply

    --------ion diagnostics system info--------
    Ionic Framework: 3.9.2
    Ionic App Scripts: 3.1.8
    Angular Core: 5.2.9
    Angular Compiler CLI: 5.2.9
    Node: 9.8.0
    OS Platform: Windows 10
    Navigator Platform: Win32
    User Agent: Mozilla/5.0 (Windows NT 10.0; WOW64; rv:59.0) Gecko/20100101 Firefox/59.0

Thanks in advance

Answer 1

I added another <ion-item>, (after the one with *ngFor), with *ngIf to check the null like the following

<ion-item *ngFor="let episode of (episodes|async)">
<ion-card ion-item *ngIf="!!episode.number" (click)="openDetails(episode)">
<img src="{{episode?.image.original}}" alt="Image not available" cache/>

Now it works like a charm.