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] ,[对象]'为管道'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