Angular2 n-为管道"AsyncPipe"获取无效的参数[object Object] ... [英] Angular2 n - getting invalid argument [object Object] ... for pipe 'AsyncPipe'

问题描述

尝试显示他的服务呼叫结果时出现错误. html页面上有一个ngFor，带有| |.异步.我可以拨打电话，获取结果，但是在尝试呈现页面时收到错误.我知道该变量需要是一个Observable才能正常工作.我不确定自己在做什么错，并尝试了几项.感谢您提供任何见识.

I am getting an error trying to display he results of my service call. The html page has an ngFor with the | async. I can make the call, get the results, but receiving an error when trying to render the page. I know the variable need to be an Observable for the async to work. I am not sure what I am doing wrong and have tried several things. Any insight is appreciated.

错误消息: 无效参数'[对象对象]，[对象对象]，[对象对象]，[对象对象]，[对象对象]，[对象对象]，[对象对象]，[对象对象]，[对象对象]，[对象对象]，[对象对象]，[对象对象]，[对象对象]，[对象对象]，[对象对象]，[对象对象]，[对象对象]，[对象对象]，[对象对象]，[对象对象]"用于管道"AsyncPipe"

Error Message: Invalid argument '[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 Object]' for pipe '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>

通话数据

推荐答案

Async管道需要Observable而不是Array.

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

In your case just try to remove 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(现在是填充产品)

Update: This already works in async manner: since products is an empty array, ngFor doesn't run. When Observable gets a response and populates data into products, a change detection round takes place and goes through ngFor again (now populating products)

我注意到的另一个奇怪的事情(我可能是错的):

Another weird thing I've noticed (I could be wrong):

ngFor非常类似于应该位于tr上:

ngFor very like should be on tr:

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

在这种情况下，您将有多行并且只有一个tbody

In this case you'll have multiple rows and just one tbody

这篇关于Angular2 n-为管道"AsyncPipe"获取无效的参数[object Object] ...的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！