Ionic运行时错误：_v.context.$implicit.image为空，求图片占位解决方案

嘿，作为刚学完Ionic速成课程的新手，遇到这种API返回空值的情况太常见啦！我来帮你搞定这个*ngIf无效的问题～

首先，咱们得先搞清楚为什么你的*ngIf没生效，大概率是这几个原因：

• 判断条件没覆盖所有空值情况（比如API返回的是null、undefined或者空字符串''）
• 组件里的变量没初始化，导致模板渲染时变量是undefined，ngIf判断出错
• 模板里的语法写得有问题

第一步：先把组件里的变量初始化好 #

在你的episode.ts里，记得先把存储剧集数据的变量初始化为空对象，避免模板渲染时因为变量未定义报错：

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

@IonicPage()
@Component({
  selector: 'page-episode',
  templateUrl: 'episode.html',
})
export class EpisodePage {
  // 初始化空对象，防止模板报错
  episode: any = {};

  constructor(private http: HttpClient, private navCtrl: NavController) {}

  ionViewDidEnter() {
    // 调用API获取数据
    this.getEpisodeDetails().subscribe(data => {
      this.episode = data;
      // 也可以在这里提前处理空值，比如给空的图片字段设个标记
      if (!this.episode.image || this.episode.image === '') {
        this.episode.hasImage = false;
      } else {
        this.episode.hasImage = true;
      }
    });
  }

  getEpisodeDetails(): Observable<any> {
    return this.http.get('你的API接口地址');
  }
}

第二步：用正确的*ngIf语法在模板里处理空值 #

假设你的模板里要显示剧集图片，原来的写法可能是这样的：

<img [src]="episode.image" />

现在改成下面两种写法之一，就能正确显示“image not found”了：

写法一：分开判断显示图片和替代文本

<!-- 当图片链接存在且不为空时显示图片 -->
<img *ngIf="episode.image && episode.image.trim() !== ''" [src]="episode.image" />
<!-- 否则显示替代文本 -->
<div *ngIf="!episode.image || episode.image.trim() === ''" class="image-placeholder">
  image not found
</div>

写法二：用ngIf else语法（更简洁）

<ng-container *ngIf="episode.image && episode.image.trim() !== ''; else noImageTemplate">
  <img [src]="episode.image" />
</ng-container>
<!-- 定义替代模板 -->
<ng-template #noImageTemplate>
  <div class="image-placeholder">image not found</div>
</ng-template>

为什么之前的*ngIf无效？ #

大概率是你之前的判断条件只判断了episode.image是否存在，但没考虑到空字符串的情况。比如API返回""（空字符串），这时候episode.image是存在的，但实际是空的，所以*ngIf会显示图片，但浏览器加载空链接就会显示破损图标。上面的写法里加上episode.image.trim() !== ''就能覆盖这种情况啦！

另外，如果API返回的图片字段是null或者根本不存在这个字段，!episode.image也能正确判断。

内容的提问来源于stack exchange，提问作者Ivan DQ