Question

我在组件类型{ 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();
}

}

Answer 1

getAll服务函数返回一个对象，它不是Product []，而是{Product []，id}

ac => {

          const data= ac.payload.val();
          const id = ac.key;
          // console.log(data);
          // console.log(id)
          return {data,id} <-- Here

        } )

它必须返回一个产品[]。

Answer 2

问题出在您的getAll函数中。您将返回{data, id}类型的对象。您应该返回data，因为您的错误表明您应该返回array中的Product。

Answer 3

Product:Product []= []; 在AdminProductsComponent字段中，应将其重命名为product而不是Product，因为它与接口名称冲突，因此应该像这样- product: Array<Product> = [];

过滤产品时无法读取角度中未定义的属性“ toLowerCase”

3 个答案: