angularjs-directive - Angular2 n - 获取无效参数 [object Object] ... 对于管道 'AsyncPipe'

Question

我在尝试显示我的服务调用结果时遇到错误。 html 页面有一个带有 | 的 ngFor异步。我可以调用电话，获取结果，但在尝试呈现页面时收到错误消息。我知道变量需要是 Observable 才能使异步工作。我不确定我做错了什么并且尝试了几件事。感谢任何见解。

错误信息:无效参数'[对象对象]，[对象对象]，[对象对象]，[对象对象]，[对象对象]，[对象对象]，[对象对象]，[对象对象]，[对象对象]，[对象对象],[对象对象],[对象对象],[对象对象],[对象对象],[对象对象],[对象对象],[对象对象],[对象对象],[对象对象],[对象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> = [];

解释:数组 | 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