类型 'AngularFireAction<DatabaseSnapshot<{}>>[]' 不可分配给类型 'Product[]'

Question

所以我正在学习这门课程，它使用的是以前版本 (4.0) 的 angularfire2，我使用的是最新版本 (5.0)，但我的代码遇到了这个问题。

我收到此错误消息 Type 'AngularFireAction>[]' is not assignable to type 'Product[]'.

export class AdminProductsComponent implements OnInit, OnDestroy {
products: Product[];
filteredProducts: any[];
subscription: Subscription;
tableResource: DataTableResource<Product>;
items: Product[];
itemCount: number;

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

}

private initializeTable(products: Product[]){
 this.tableResource = new DataTableResource(products);
  this.tableResource.query({ offset: 0})
    .then(items => this.items = items);
  this.tableResource.count()
    .then(count => this.itemCount = count);
}

reloadItems(params){ 
 if(!this.tableResource) return;
 this.tableResource.query(params)
    .then(items => this.items = items);
}

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

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


}

这里是产品服务代码

export class ProductService {

constructor(private db: AngularFireDatabase) { }

create(product){
  return this.db.list('/products').push(product);
}

getAll(){
  return this.db.list('/products').snapshotChanges(); 
}

get(productId){
  return this.db.object('/products/' + productId);
}

update(productId, product){
  return this.db.object('/products/' + productId).update(product);
}

delete(productId){
  return this.db.object('/products/' + productId).remove(); 
}

}

Answer 1

您服务中的 getAll() 方法正在返回 snapshotChanges()。这是一个 Observable<AngularFireAction<DatabaseSnapshot<{}>>[]>，您正试图将其传递给 initializeTable(products: Product[])。这就是错误的意思。

为了解决这个问题，您需要像这样将 .snapshotChanges() 映射到您的 Product[]：

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

Answer 2

GetAllProducts() : Observable<Product[]>{  returnthis.db.list('/products').snapshotChanges().pipe(
    map(changes => 
      changes.map(c => ({ key: c.payload.key, ...c.payload.val() as Product }))
    )
  );
  }

首先，你应该像上面一样添加GetAll()，并且你应该在你的函数中添加 as Product 接口。

类型 'AngularFireAction<DatabaseSnapshot<{}>>[]' 不可分配给类型 'Product[]'

Type 'AngularFireAction<DatabaseSnapshot<{}>>[]' is not assignable to type 'Product[]'

firebase

angularfire

angularfire2

angular