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

【问题标题】：Cannot read property 'toLowerCase' of undefined in angular when filtering products过滤产品时无法读取角度未定义的属性“toLowerCase”
【发布时间】：2023-03-20 02:23:01
【问题描述】：

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

}

【问题讨论】：

this.product 在构造函数中显示错误...
看看How do I ask a good question?。
@sandeepkumarBrungi 尝试在控制台中打印 this.Product。
请发布完整的错误，以便我们更好地理解它
@Yeheshuah：谢谢你的建议。因为我是这个世界的新手..:)

标签： javascript angular database firebase

【解决方案1】：

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

【讨论】：

控制台错误：无法读取未定义的属性“toLowerCase”。
在组件 this.product 中指示错误为:: Type { data: Product[]; id：字符串； }[]' 不可分配给类型 'Product[]。类型{数据：产品[]； id：字符串； } 缺少“产品”类型的以下属性：标题、价格、类别、imageUrl

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

是什么阻止您使用以下代码？

const data = ac.payload.val();
data.id = ac.key;
return data;

【讨论】：