Question

我正在创建一个Android应用来查看有关电视剧的详细信息。我是新的Ionic，我在Ionic Academy做了速成课程。 API调用收到的一些值为null。我希望在这些结果中显示“未找到图像”。
我尝试使用*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为空的页面上才会弹出此错误
当我收到空白作为回复时如何在该地方显示“未找到”

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

现在它就像一个魅力。

离子运行时错误：_v.context。$ implicit.image为null

1 个答案: