角度9：类型错误产品未定义

Question

在这里，定义一个开头没有定义的产品。

private Products: product[];

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

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: Error: TypeError: Cannot read property '...' of undefined

我希望这次我将知道此问题的正确答案。 感谢您的帮助。

Answer 1

现在我明白了。 async管道与数组一起使用。应该用于Promises或Observables。

Answer 2

您同时使用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。

Answer 3

我在下面的stackblitz中转载了您的代码示例，请查看我如何能够显示产品而没有任何未定义的问题。

https://stackblitz.com/edit/angular-ivy-vssmhg?file=src%2Fapp%2Fapp.component.ts

在您的情况下，如果从服务返回的值未定义，则意味着res的值等于未定义，则服务可能存在问题，您可以尝试执行以下操作：< / p>

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