Angular2 n - nhận đối số không hợp lệ [đối tượng đối tượng] ... cho đường ống 'AsyncPipe'

Question

Tôi gặp lỗi khi cố hiển thị kết quả cuộc gọi dịch vụ của anh ấy. Trang html có một ngFor với | không đồng bộ. Tôi có thể thực hiện cuộc gọi, nhận kết quả, nhưng nhận được lỗi khi cố gắng hiển thị trang. Tôi biết biến cần phải là một Observable cho async để làm việc. Tôi không chắc mình đang làm gì sai và đã thử nhiều thứ. Bất kỳ cái nhìn sâu sắc được đánh giá cao.

Thông báo lỗi: luận không hợp lệ '[đối tượng Object], [đối tượng Object], [đối tượng Object], [đối tượng Object], [đối tượng Object], [đối tượng Object], [đối tượng Object], [đối tượng Object], [Object Object], [Object Object], [Object Object], [Object Object], [Object Object], [Object Object], [Object Object], [Object Object], [Object Object], [đối tượng Object], [đối tượng Object], [đối tượng Object]' cho ống 'AsyncPipe'

Biến Definition

public products:Observable<Product[]>; 

Gọi tới Dịch vụ

ngOnInit() { 

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

}

Dịch vụ Gọi

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> 

dữ liệu từ Gọi

Answer 1

Async ống cần một Observable thay vì sau đó một Array.

Trong trường hợp của bạn chỉ cần cố gắng để loại bỏ async:

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

Cũng thay đổi định nghĩa biến:

public products:Array<Product> = []; 

Giải thích: array | async không subscribe của chính nó.

Mã

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

biến một Observable để Array of Products

Cập nhật: này đã làm việc trong async cách: từ products là một mảng trống rỗng, ngFor không chạy.Khi Observable nhận được một phản ứng và populates dữ liệu vào products, một vòng change detection diễn ra và đi qua một lần nữa ngFor (nay Populating sản phẩm)

Một điều lạ Tôi đã chú ý (Tôi có thể sai):

ngFor rất như nên trên tr:

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

Trong trường hợp này bạn sẽ có nhiều hàng và chỉ là một tbody