Angular2 n - 获取无效参数[object Object] ... for pipe'AsyncPipe'

Question

我在尝试显示服务呼叫结果时出错。 html页面有一个带有|的ngFor异步。我可以进行调用，获取结果，但在尝试呈现页面时收到错误。我知道变量需要是一个Observable才能使异步工作。我不确定我做错了什么，并尝试了几件事。任何见解都表示赞赏。

错误消息： 参数'[object Object]，[object Object]，[object Object]，[object Object]，[object Object]，[object Object]，[object Object]，[object Object]，[object Object]，[object]无效Object]，[object Object]，[object Object]，[object Object]，[object Object]，[object Object]，[object Object]，[object Object]，[object Object]，[object Object]，[object对象]'用于管道'AsyncPipe'

变量定义

  public products:Observable<Product[]>;

致电服务

ngOnInit() {

    this.productService.load().subscribe(
      data => {
        // Set the products Array
        this.products = data['_embedded'].products;
      },
      error => console.log('Could not find product catalog.')
    );

}

服务电话

 load() {
    return this._http.get(`http://localhost:8000/products`).map(response => response.json());
  }

HTML

<tbody *ngFor="let product of products | async">
          <tr>
            <td>{{product.sku}}</td>
            <td>{{product.materialNumber}}</td>
            <td>{{product.price}}</td>
            <td>{{product.baseUom}}</td>
            <td>{{product.packageSize}}</td>
            <td>{{product.casePack}}</td>
            <td>{{product.weight}}</td>
            <td>{{product.height}}</td>
          </tr>
          </tbody>

来自来电的数据

Answer 1

Async管道需要Observable，而不是Array。

在您的情况下，只需尝试删除async：

<tbody *ngFor="let product of products">

同时更改变量定义：

public products:Array<Product> = [];

说明： array | async本身subscribe。

代码

this.productService.load().subscribe(
  data => {
    // Set the products Array
    this.products = data['_embedded'].products;
  },...

将Observable转换为Array of Products

<强>更新： 这已经以async方式运行：由于products是一个空数组，ngFor无法运行。当Observable获得回复并将数据填充到products时，会发生change detection轮并再次通过ngFor（现在正在填充产品）

我注意到的另一件奇怪的事情（我可能错了）：

ngFor非常喜欢tr：

<tbody>
   <tr *ngFor="let product of products | async">
   ...
   </tr>
</tbody>

在这种情况下，您将拥有多行，只有一行tbody