angularjs-directive - directives - directivas angularjs

Angular2 n: obtención de un argumento no válido[object Object]... para la tubería ''AsyncPipe''

Question

Me aparece un error al intentar mostrar los resultados de mi llamada de servicio. La página html tiene un ngFor con | asincrónico Puedo hacer la llamada, obtener los resultados, pero recibir un error al intentar presentar la página. Sé que la variable debe ser un Observable para que la asincronía funcione. No estoy seguro de lo que estoy haciendo mal y he intentado varias cosas. Cualquier idea es apreciada.

Mensaje de error: argumento inválido ''[Objeto objeto], [objeto objeto], [objeto objeto], [objeto objeto], [objeto objeto], [objeto objeto], [objeto objeto], [objeto objeto], [objeto objeto] , [Objeto objeto], [Objeto objeto], [Objeto objeto], [Objeto objeto], [objeto objeto], [objeto objeto], [objeto objeto], [objeto objeto], [objeto objeto], [objeto objeto] , [object Object] ''for pipe'' AsyncPipe ''

Definición variable

  public products:Observable<Product[]>;

Llamada al servicio

ngOnInit() {

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

}

Llamada de servicio

 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>

Datos de llamada

Answer 1

Async tubería Async necesita un Observable lugar de una Array .

En tu caso, solo intenta eliminar la async :

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

También cambie la definición de variable:

public products:Array<Product> = [];

Explicación: array | async array | async subscribe por sí mismo.

El código

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

transforma un Observable en Array of Products

Actualización : Esto ya funciona de manera async : dado que los products son una matriz vacía, ngFor no se ejecuta. Cuando Observable obtiene una respuesta y rellena los datos en los products , se lleva a cabo una ronda de change detection y pasa a través de ngFor nuevamente (ahora ngFor productos)

Otra cosa extraña que he notado (podría estar equivocado):

ngFor mucho debe estar en tr :

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

En este caso, tendrá múltiples filas y solo un tbody