Question

我正在尝试使用异步管道来显示我的列表。我不断收到管道'AsyncPipe'的错误无效管道参数[object Object]

由于我需要列表和键，因此我使用了快照更改而不是值更改。我已将可观察对象映射到该接口，然后在管理产品组件中对其进行订阅。该列表根本不显示，但是当我在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>

如何使用异步管道显示列表

1 个答案: