Angular Ionic开发中ctx.product为undefined导致数据无法展示问题

问题原因 #

报错本质是异步请求完成前，模板已提前触发首次渲染，此时product变量尚未被赋值，初始值为undefined，直接访问product.productName这类属性就会抛出类型错误。你能在控制台看到打印的返回数据，是因为打印逻辑在请求响应回调中执行，时机晚于模板首次渲染。

解决方案 #

方案1：使用可选链运算符（最简修改） #

Angular模板原生支持可选链语法，访问属性前添加?，当变量为undefined/null时会自动终止属性访问，不会抛出错误。只需将HTML中所有product.xxx修改为product?.xxx即可：

<h1>{{ product?.productName }}</h1>
<p>{{ product?.productPrice }}</p>
<p>{{ product?.productDescription }}</p>

方案2：模板添加*ngIf判断控制渲染 #

用结构指令*ngIf控制只有product赋值完成后才渲染对应内容，还可以搭配加载状态提升用户体验：

<ion-content color="dark">
  <!-- 加载占位 -->
  <div *ngIf="!product" style="padding: 20px; text-align: center;">
    <ion-spinner name="crescent"></ion-spinner>
    <p>商品信息加载中...</p>
  </div>

  <!-- 商品内容，仅product有值时渲染 -->
  <div *ngIf="product">
    <div class="product-image-container">
      <div class="product-image-wrapper">
        <img [src]="'https://via.placeholder.com/1000'">
      </div>
      <div class="product-name">
        <h1>{{ product.productName }}</h1>
      </div>
    </div>
    <div class="product-description">
      <h6>Price:</h6>
      <p>{{ product.productPrice }}</p>
      <h6>Description:</h6>
      <p>{{ product.productDescription }}</p>
    </div>
  </div>
</ion-content>

方案3：给product设置初始值 #

在page.ts声明变量时直接赋予符合IProduct接口的空初始值，避免变量为undefined：

// 将原声明代码 product: IProduct; 替换为以下内容
product: IProduct = {
  productID: '',
  productImage: '',
  productName: '',
  productDescription: '',
  productRating: 0,
  productPrice: 0
};

代码优化建议 #

page.ts中subscribe回调的参数可以直接指定为IProduct类型，无需用any，更符合TypeScript类型规范：

ngOnInit() {
  this.service.getProduct().subscribe((data: IProduct) => {
    this.product = data;
    console.log(this.product);
  });
}

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