Как использовать асинхронный канал для отображения списка

Question

Я пытаюсь использовать канал Async для отображения моего списка.Я постоянно получаю сообщение об ошибке: недопустимый аргумент канала [объектный объект] для канала 'AsyncPipe'

Я использовал изменения снимка вместо изменений значения, так как мне нужны и список, и ключ.Я сопоставил наблюдаемое с интерфейсом, а затем подписался на него в компоненте admin-product.Список не отображается вообще, но когда я удаляю асинхронный в Html, список появляется.

/////////PRODUCT SERVICE.ts///////////

getAll() {
    return this.db.list('/products')
        .snapshotChanges()
        .pipe(
            map(changes =>
                changes.map(c => {
                    const data = c.payload.val() as Product;
                    const id = c.payload.key;
                    return { id, ...data };
                })
            )
        );
}


////// Product Interface///////

export interface Product {
    title: string;
    price: number;
    category: string;
    imageUrl: string;
}



////Admin-Products Component//////

import { Component, OnInit, OnDestroy } from '@angular/core';
import { ProductService} from './../../product.service';
import { Subscription } from 'rxjs/Subscription';
import {Product } from './../../models/product';

@Component({
  selector: 'app-admin-products',
  templateUrl: './admin-products.component.html',
  styleUrls: ['./admin-products.component.css']
})
export class AdminProductsComponent implements OnInit, OnDestroy {
products: Product[];
filteredProducts: any[];
subscription: Subscription;

constructor(private productService: ProductService) {
  this.subscription = this.productService.getAll()
  .subscribe(products => this.filteredProducts = this.products = products)

}

filter(query: string) {
  this.filteredProducts = (query) ?
  this.products.filter(p => p.title.toLowerCase().includes(query.toLowerCase())) :
  this.products;
}

  ngOnDestroy() {
    this.subscription.unsubscribe();
  }


//// Admin-Products.component.html /////


<p>
  <a routerLink='/admin/products/new' class='btn btn-primary'>New Product</a>
</p>
<p>
  <input
  #query
  (keyup)='filter(query.value)'
  type="text" class="form-control" placeholder="Search...">
</p>

<table class="table">
  <thead>
    <tr>
      <th>Title</th>
      <th>Price</th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor='let p of filteredProducts | async '>
      <td>{{p?.title}}</td>
      <td>{{p?.price}}</td>
      <td></td>
      <td>
        <a [routerLink]='["/admin/products/", p?.$key]'>edit</a>
      </td>
    </tr>
  </tbody>
</table>

Answer 1

В моем случае я подписывался на наблюдаемое и использовал асинхронный канал. Здесь я исправил код, чтобы он заработал.

  ////Old Code//// 


     <tr *ngFor='let p of filteredProducts | async '>
          <td>{{p?.title}}</td>
          <td>{{p?.price}}</td>
          <td></td>
          <td>
            <a [routerLink]='["/admin/products/", p?.$key]'>edit</a>
          </td>


    //// New Code //// 

    <tr *ngFor='let p of filteredProducts'>
          <td>{{p?.title}}</td>
          <td>{{p?.price}}</td>
          <td></td>
          <td>
            <a [routerLink]='["/admin/products/", p.id]'>edit</a>