当过滤产品时,无法读取angular中undefined的'toLowerCase'属性。

问题描述 投票:0回答:2

我在组件类型中遇到这个问题 { 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();
}

}






javascript angular database firebase
2个回答
0
投票

问题出在你的 getAll 函数。你要返回一个类型为 {data, id}. 你应该回来 data 因为您的错误意味着您将返回一个 arrayProduct.


0
投票

Product:Product []= [];应将AdminProductsComponent字段改名为"..."。product 而不是 Product 因为它与接口名冲突,所以应该是这样的--。product: Array<Product> = [];


0
投票

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[]。

© www.soinside.com 2019 - 2024. All rights reserved.