angularjs-directive - compile - angularjs directives



Angular2 n-ungültiges Argument[Objekt Objekt]... für die Pipe 'AsyncPipe' erhalten (1)

Ich erhalte einen Fehler beim Versuch, die Ergebnisse meines Serviceanrufs anzuzeigen. Die HTML-Seite hat eine ngFor mit dem | asynchron. Ich kann den Anruf tätigen, die Ergebnisse abrufen, aber beim Versuch, die Seite zu rendern, einen Fehler erhalten. Ich weiß, dass die Variable ein Observable sein muss, damit das Async funktioniert. Ich bin mir nicht sicher, was ich falsch mache und habe mehrere Dinge ausprobiert. Jeder Einblick wird geschätzt.

Fehlermeldung: Ungültiges Argument '[Objekt Objekt], [Objekt Objekt], [Objekt Objekt], [Objekt Objekt], [Objekt Objekt], [Objekt Objekt], [Objekt Objekt], [Objekt Objekt], [Objekt Objekt] , [Objekt Objekt], [Objekt Objekt], [Objekt Objekt], [Objekt Objekt], [Objekt Objekt], [Objekt Objekt], [Objekt Objekt], [Objekt Objekt], [Objekt Objekt], [Objekt Objekt] , [Objekt Objekt] 'für die Pipe' AsyncPipe '

Variable Definition

  public products:Observable<Product[]>;

Anruf zum Service

ngOnInit() {

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

}

Serviceanruf

 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 vom Anruf


Async Pipes benötigen ein Observable und nicht ein Array .

Versuchen Sie in Ihrem Fall, async zu entfernen:

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

Ändern Sie auch die Variablendefinition:

public products:Array<Product> = [];

Erklärung: array | async array | async subscribe array | async .

Der Code

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

verwandelt ein Observable in ein Array of Products

Update : Dies funktioniert bereits async : da products ein leeres Array ist, wird ngFor nicht ausgeführt. Wenn Observable eine Antwort erhält und Daten in products ngFor , findet eine change detection statt und durchläuft ngFor erneut (jetzt werden Produkte ngFor ).

Eine andere seltsame Sache, die ich bemerkt habe (ich könnte falsch liegen):

ngFor sehr ähnlich sollte auf tr :

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

In diesem Fall haben Sie mehrere Reihen und nur einen tbody





angular