Angular2 n - immer invalid argument [object object] ... für Rohr 'AsyncPipe'

Erhalte ich eine Fehler-Anzeige er Ergebnisse meiner service-Aufruf. Die html-Seite hat eine ngFor mit der | async. Ich kann die nennen, die Ergebnisse zu erhalten, aber erhalten Sie eine Fehlermeldung beim Versuch die Seite zu Rendern. Ich weiß, die variable muss zu einer Beobachtbaren, für das asynchrone arbeiten. Ich bin nicht sicher, was ich falsch mache und habe versucht, ein paar Dinge. Jede Einsicht wird sehr geschätzt.

Fehlermeldung:
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]' Rohr 'AsyncPipe'

Variable Definition

  public products:Observable<Product[]>;

Anruf beim 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-Aufruf

 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>

Daten Aus Call -

Angular2 n - immer invalid argument [object object] ... für Rohr 'AsyncPipe'

InformationsquelleAutor Don | 2016-06-30

angular angularjs-directive

14

Async Rohr muss ein Observable dann eher ein Array.

In Ihrem Fall nur versuchen, Sie zu entfernen async:
```
<tbody *ngFor="let product of products">
```
Auch ändern variable-definition:
```
public products:Array<Product> = [];
```
Erklärung:
array | async hat subscribe von selbst.

Den code
```
this.productService.load().subscribe(
  data => {
    //Set the products Array
    this.products = data['_embedded'].products;
  },...
```
verwandelt ein Observable zu Array of Products

Update:
Dies funktioniert bereits in async Weise: da products ist ein leeres array, ngFor läuft nicht. Wenn Observable bekommt eine Antwort und füllt Daten in products eine change detection Runde findet statt und geht durch ngFor wieder (jetzt das Auffüllen der Produkte)

Andere seltsame Sache, die ich bemerkt habe (ich könnte falsch sein):

ngFor sehr wie sollten Sie auf tr:
```
<tbody>
   <tr *ngFor="let product of products | async">
   ...
   </tr>
</tbody>
```
In diesem Fall haben Sie mehrere Zeilen und nur einer tbody
- Danke, ja das entfernen der async-von der ngFor funktioniert, aber ich wollte, um die Dinge zu arbeiten, mit dem async ... vielen Dank für Ihre Eingabe
- Ich habe aktualisiert die Antwort mit mehr Erklärungen
- Danke Andrej.
InformationsquelleAutor Andrei Zhytkevich

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.