Не удается прочитать свойство toLowerCase неопределенного в angular при фильтрации продуктов

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. Вы возвращаете объект типа {data, id}. Вы должны вернуть data, поскольку ваша ошибка означает, что вы должны вернуть array из Product.

Answer 2

Product:Product []= []; в поле AdminProductsComponent следует переименовать в product, а не Product, поскольку оно конфликтует с именем интерфейса, поэтому оно должно быть таким - product: Array<Product> = [];

Answer 3

сервисная функция 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 [].