Estou recebendo um erro ao tentar exibir os resultados da minha chamada de serviço. A página html possui um ngFor com o | assíncrono. Posso fazer a ligação, obter os resultados, mas recebo um erro ao tentar renderizar a página. Eu sei que a variável precisa ser um Observável para que o assíncrono funcione. Não tenho certeza do que estou fazendo de errado e tentei várias coisas. Qualquer insight é apreciado.

Mensagem de erro: 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], [objeto Objeto] 'para o canal' AsyncPipe '

Definição de variável

  public products:Observable<Product[]>;

Ligue para o Serviço

ngOnInit() {

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

}

Chamada de serviço

 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>

Dados da chamada