时间戳

首页 > 解决方案 > Angular Ionic - 数据未显示，因为 ctx.data 未定义

angular - Angular Ionic - 数据未显示，因为 ctx.data 未定义

问题描述

我正在尝试在服务器上显示我的 SQL 数据库中的数据。数据被正确检索，但它没有显示在我的应用程序中。如果我 console.log 它在控制台中完美显示。

接口 ts：

export interface IProduct {
  productID: string;
  productImage: string;
  productName: string;
  productDescription: string;
  productRating: number;
  productPrice: number;
}

page.ts：

export class ViewProductPage implements OnInit {

  product: IProduct;

  constructor(private service: CustomerService) { }

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

HTML：

<ion-content color="dark">
  <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>
</ion-content>

控制台中显示的错误是：

错误类型错误：无法访问属性“productName”，ctx.product 未定义

获取方法：

getProduct(): Observable<IProduct> {
  return this.http.get<IProduct>(this.baseURI + 'CustomerOrder/GetProduct/' + this.productID);
}

标签： angulartypescriptionic-framework

解决方案

由于您没有初始化product并且收到响应的延迟，您product 将是undefined。

在收到响应之前，只有您product将被分配一个值。

解决方案 1：可选链接

根据可选链接，

这 ？。运算符就像 . 链接运算符，除了如果引用为空（null 或未定义）时不会导致错误，表达式会短路并返回未定义的值。与函数调用一起使用时，如果给定函数不存在，则返回 undefined。

<ion-content color="dark">
  <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>
</ion-content>

StackBlitz 上的示例解决方案 1

product解决方案 2：检查*ngIf

添加*ngIf到检查product，以便它不会在productisnull或时访问其内部属性undefined。

<ion-content color="dark">
  <ng-container *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>
  </ng-container>
</ion-content>

StackBlitz 上的示例解决方案 2

注意：添加了两种解决方案以延迟 Observable（5 秒）以重现问题。

推荐阅读