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

Question

我正在创建一个 Android 应用程序来查看有关电视剧的详细信息。我是 Ionic 新手，我在 Ionic Academy 参加了速成班。 API 调用收到的一些值是 null。我想在这些结果中显示 "image not found"。
我尝试使用 *ngIf 它没有用。这是我当前的代码。

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

}

这是那个页面的HTML
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>

有图片的页面显示的是图片。仅在其中一个剧集的 img 为空的页面上才会弹出此错误。

当我收到 null 作为回复时，如何在该位置显示 "not found"

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

提前致谢

Answer 1

我添加了另一个 <ion-item>，（在带有 *ngFor 的那个之后），使用 *ngIf 来检查 null，如下所示

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

现在它就像一个魅力。

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

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

ionic-framework

ionic-view

angular