Angular 管道上的 .includes 返回“属性 'includes' 在类型 'never'.ts(2339)' 上不存在错误消息

Question

I'm coding an Angular Pipe that has to iterate an array of objects and filter by field and field value.

When I'm checking if the value field contains the value for what is filtered by i get the following error message: Property 'includes' does not exist on type 'never'.ts(2339)

This is my pipe.ts code:

transform(items: [], field: string, value: string): any[] {

    let res = [];

   console.log(items);

    for(let a = 0; a < items.length; a++) {

      if((items[a][field]).includes(value)) {
        res.push(items[a]);
      }

    }

    return res;
  }

What I want is that when I pass some array through the pipe it check if the atribute contains the value specified. The array, the atribute and the filter value are setted on the view. Ex: <p>{{ foods | filter : 'name' : 'zz' }}</p> <p>{{ foods | filter : 'name' : 'zz' }}</p>

This is the array I have on the controller:

foods: Object[] = [
    {
      name: "Pizza",
      calories: 400,
      image: "https://i.imgur.com/eTmWoAN.png",
      quantity: 0
    },
    {
      name: "Salad",
      calories: 150,
      image: "https://i.imgur.com/DupGBz5.jpg",
      quantity: 0
    },
    {
      name: "Sweet Potato",
      calories: 120,
      image: "https://i.imgur.com/hGraGyR.jpg",
      quantity: 0
    },
    {
      name: "Gnocchi",
      calories: 500,
      image: "https://i.imgur.com/93ekwW0.jpg",
      quantity: 0
    },
    {
      name: "Pot Roast",
      calories: 350,
      image: "https://i.imgur.com/WCzJDWz.jpg",
      quantity: 0
    },
    {
      name: "Lasagna",
      calories: 750,
      image: "https://i.imgur.com/ClxOafl.jpg",
      quantity: 0
    },
    {
      name: "Hamburger",
      calories: 400,
      image: "https://i.imgur.com/LoG39wK.jpg",
      quantity: 0
    },
    {
      name: "Pad Thai",
      calories: 475,
      image: "https://i.imgur.com/5ktcSzF.jpg",
      quantity: 0
    },
    {
      name: "Almonds",
      calories: 75,
      image: "https://i.imgur.com/JRp4Ksx.jpg",
      quantity: 0
    },
    {
      name: "Bacon",
      calories: 175,
      image: "https://i.imgur.com/7GlqDsG.jpg",
      quantity: 0
    },
    {
      name: "Hot Dog",
      calories: 275,
      image: "https://i.imgur.com/QqVHdRu.jpg",
      quantity: 0
    },
    {
      name: "Chocolate Cake",
      calories: 490,
      image: "https://i.imgur.com/yrgzA9x.jpg",
      quantity: 0
    },
    {
      name: "Wheat Bread",
      calories: 175,
      image: "https://i.imgur.com/TsWzMfM.jpg",
      quantity: 0
    },
    {
      name: "Orange",
      calories: 85,
      image: "https://i.imgur.com/abKGOcv.jpg",
      quantity: 0
    },
    {
      name: "Banana",
      calories: 175,
      image: "https://i.imgur.com/BMdJhu5.jpg",
      quantity: 0
    },
    {
      name: "Yogurt",
      calories: 125,
      image: "https://i.imgur.com/URhdrAm.png",
      quantity: 0
    }
  ]

I don't get why the .contains throws error if I do console.log(items[a][field] inside the loop I get the food's name correctly.

Answer 1

Consider the line transform(items: [], field: string, value: string): any[] { specifically items: [] This indicates that the type of item is an empty array hence the error

To resolve this simply provide a type, you can start by item: any[]