Question

我在属性产品中声明了数组IProducts，如下图所示。但是令我烦恼的是，他们没有认可productName被声明..请我帮忙

product-list.component.ts

filteredProducts: IProduct[];
products : IProduct[] = [{
        "productId": 2 ,
        "productName": "Garden Cart" ,
        "productCode": "GDN-0023" ,
        "releaseDate": "March 18,2018",
        "description":  " 15 gallon capacity rolling",
        "price" :   32.99,
        "starRating": 4.2,
        "imageUrl" : "http://openclipart.org/image/300px/sgv_to_png/58471/garden_cart.png",

    },
    {

        "productId": 5 ,
        "productName": "Hammer" ,
        "productCode": "TBX-0048" ,
        "releaseDate": "May 21,2016",
        "description":  " Curved claw steel Hammer",
        "price" :   8.9,
        "starRating": 4.8,
        "imageUrl" : "http://openclipart.org/image",


    }
] ;

constructor() {

  this.filteredProducts = this.products;
  this.listFilter = 'cart';
}

performFilter(filterBy: string): IProduct[]{
    filterBy =filterBy.toLocaleLowerCase();
    return this.products.filter((product: IProduct) =>
        this.products.productName.toLocaleLowerCase().indexOf(filterBy) !== -1);
}

终端生成以下错误：“ src / app / products / product-list.component.ts（131,27）：错误TS2339：属性'productName'在'IProduct []'类型上不存在。” < / p>

Answer 1

我将根据您所显示的内容继续前进，并说this.products是IProduct的数组。

您正在尝试访问数组的属性productName，需要指定要访问的数组元素。幸运的是，您已经可以访问过滤器函数中的元素，因此您可以执行

return this.products.filter((product: IProduct) =>
            product.productName.toLocaleLowerCase().indexOf(filterBy) !== -1);

Answer 2

您的语法有问题这是解决此问题的方法：

performFilter(filterBy: string): IProduct[]{
        filterBy =filterBy.toLocaleLowerCase();
        return this.products.filter((product: IProduct) =>
            product.productName.toLocaleLowerCase().indexOf(filterBy) !== -1
    )}

基本上迭代遍历产品所在的数组：IProduct是数组的元素

Answer 3

IProduct必须是模式，并且productName必须是其中的属性。

或仅使用products: any代替products: IProduct[]

属性“名称”在类型“ []”上不存在

3 个答案: