我在组件类型中遇到这个问题 { data: Product[]; id: string; }[]' is not assignable to type 'Product[]
. 种类 { data: Product[]; id: string; }
类型中缺少以下属性 'Product': title, price, category, imageUrl
. 当我试图将从数据库返回的值分配给
this.filterdProduct = this.Product = products;
在构造函数中...
这是我的代码。接口
export interface Product{
title:string;
price:number;
category:string;
imageUrl:string;
}
Service.Ts:
import { Product } from './../../new-products';
import { Observable } from 'rxjs';
import { AngularFireDatabase } from '@angular/fire/database';
import { Injectable } from '@angular/core';
import { map } from 'rxjs/operators';
@Injectable({
providedIn: 'root'
})
export class ProductService {
constructor(private db: AngularFireDatabase){}
create(product){
return this.db.list('/products').push(product);
}
getAll() {
return this.db.list<Product[]>('/products').snapshotChanges()
.pipe(
map(a =>
a.map(
ac => {
const data= ac.payload.val();
const id = ac.key;
// console.log(data);
// console.log(id)
return {data,id}
} )
)
);
}
Component.ts:
import { Product } from './../../new-products';
import { ProductService } from './../Services/product.service';
import { AngularFireDatabase } from '@angular/fire/database';
import { Component, OnInit, OnDestroy } from '@angular/core';
import { Subscription } from 'rxjs';
@Component({
selector: 'app-admin-products',
templateUrl: './admin-products.component.html',
styleUrls: ['./admin-products.component.css']
})
export class AdminProductsComponent implements OnInit, OnDestroy {
Product:Product []= [];
filterdProduct:any = [];
subscription: Subscription;
constructor(private pd:ProductService){
this.subscription = this.pd.getAll().subscribe(products => {
this.filterdProduct = this.Product = products;
})
}
filter(query:string){
this.filterdProduct = (query) ?
this.Product.filter(p => p.title.toLowerCase().includes(query.toLowerCase())) : this.Product;
console.log(query)
}
ngOnInit(){
}
ngOnDestroy(){
this.subscription.unsubscribe();
}
}
问题出在你的 getAll
函数。你要返回一个类型为 {data, id}
. 你应该回来 data
因为您的错误意味着您将返回一个 array
的 Product
.
Product:Product []= [];
应将AdminProductsComponent字段改名为"..."。product
而不是 Product
因为它与接口名冲突,所以应该是这样的--。product: Array<Product> = [];
getAll服务函数返回一个对象,它不是一个Product[],而是{ Product[], id}。
ac => {
const data= ac.payload.val();
const id = ac.key;
// console.log(data);
// console.log(id)
return {data,id} <-- Here
} )
它必须返回一个Product[]。