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

问题描述

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

错误信息:无效参数 '[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object对象],[对象对象],[对象对象],[对象对象],[对象对象],[对象对象],[对象对象],[对象对象],[对象对象],[对象对象],[对象对象]' 用于管道 'AsyncPipe'

变量定义

 公共产品:Observable;

致电服务

ngOnInit() {this.productService.load().subscribe(数据 =>{//设置产品数组this.products = data['_embedded'].products;},错误 =>console.log('找不到产品目录.'));

}

服务电话

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

HTML

<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:

还要更改变量定义:

公共产品:Array= [];

说明:<代码>数组 |async 自己subscribe.

代码

this.productService.load().subscribe(数据 =>{//设置产品数组this.products = data['_embedded'].products;},...

将 Observable 转换为 Array of Products

更新:这已经以 async 方式工作:由于 products 是一个空数组，ngFor 不会运行.当 Observable 收到响应并将数据填充到 products 中时，会发生一个 change detection 回合并再次通过 ngFor(现在正在填充产品)

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

ngFor 很像应该放在 tr 上:

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

在这种情况下，你会有多行，只有一个 tbody

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.

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'

Variable Definition

  public products:Observable<Product[]>;

Call to Service

ngOnInit() {

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

}

Service Call

 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>

Data From Call

解决方案

Async pipe needs an Observable rather then an Array.

In your case just try to remove async:

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

Also change variable definition:

public products:Array<Product> = [];

Explanation: array | async does subscribe by itself.

The code

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

transforms an Observable to Array of Products

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 very like should be on tr:

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

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

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