时间戳

首页 > 解决方案 > Angular 9：类型错误产品未定义

angular - Angular 9：类型错误产品未定义

问题描述

在这里，定义一开始未定义的产品。

private Products: product[];

Products 是在另一个类中定义的产品接口的数组

getProducts() {
    this.productService.getProducts().subscribe(
      res => { 
        this.Products = res
      },
      (error) => { console.log(error.error.message) }
    )
  }

并在 ngOnInit 方法中调用在该数组中添加数据的服务

这个变量是未定义的，我不能在这里使用安全导航运算符。我尝试使用，*ngIf但这似乎不起作用。

<div *ngIf="!(Products == undefined)">
      <tr *ngFor="let product of Products | async ; index as i">
      <th scope="row">{{ i + 1 }}</th>
      <td><img class="mr-2" src="{{ product?.image_url }}" height="50" width="50"></td>
      <td>{{ product?.name }}</td>
      <td>{{ product?.description }}</td>
      <td>{{ product?.price | number }} $</td>
      </tr>
    </div>

我已经以超过 3 种方式使用了 *ngIf，并且阅读了其他关于同一问题的帖子，但我的问题没有解决。

我试过这个方法，但它不起作用。这是我每次使用角度数组时都会遇到的错误。

angular2：错误：TypeError：无法读取未定义的属性“...”

我希望这次我能知道这个问题的正确答案。谢谢你的帮助。

标签： angularundefined

解决方案

您正在同时使用async和订阅控制器。它应该是其中之一。

选项 1：使用async

控制器

Products: any;

getProducts() {
  this.Products = this.productService.getProducts();
}

模板

<div *ngIf="Products">
  <tr *ngFor="let product of Products | async; let i = index">    <!-- using `async` here -->
    <th scope="row">{{ i + 1 }}</th>
    <td><img class="mr-2" src="{{ product?.image_url }}" height="50" width="50"></td>
    <td>{{ product?.name }}</td>
    <td>{{ product?.description }}</td>
    <td>{{ product?.price | number }} $</td>
  </tr>
</div>

选项 2：在控制器中订阅（否async）

控制器

public Products: product[];

getProducts() {
  this.productService.getProducts().subscribe(
    res => { this.Products = res },
    error => { console.log(error.error.message) }
  );
}

模板

<ng-container *ngIf="Products">
  <tr *ngFor="let product of Products; let i = index">   <!-- no `async` here -->
    <th scope="row">{{ i + 1 }}</th>
    <td><img class="mr-2" src="{{ product?.image_url }}" height="50" width="50"></td>
    <td>{{ product?.name }}</td>
    <td>{{ product?.description }}</td>
    <td>{{ product?.price | number }} $</td>
  </tr>
</ng-container>

用于<ng-container>简单检查。它们被编译为注释，并且不会向 DOM 添加任何其他元素。

推荐阅读