I am trying to show the list of food types whereas I need to display the first 5 values in the html. While using slice I am getting this error Property 'slice' does not exist on type '{ categories: Category[]; }

   loadcategoriesfood(): Observable<{ categories: Category[] }> {
    return this.http.get<{ categories: Category[] }>(
      this.recipies.listofcategories   'categories.php',
      {}
    ).pipe(map((food) => food.slice(0, 5)));
  }

CodePudding user response：

Based on the return type of the GET method, I'm assuming your observable will return { categories: Category[] }. This means you'll receive an object (food) inside your map operator's callback. hence you'll need to apply the slice method on the property of the food object which is categories.

If this doesn't work try adding a console.log or breakpoint inside the map operator to determine what value you're receiving and if that value is an array.

CodePudding user response：

Based on your console log showing that "food" has a sub property of categories you need to slice on that if you want to slice on anything.

 loadcategoriesfood(): Observable<{ categories: Category[] }> {
    return this.http.get<{ categories: Category[] }>(
      this.recipies.listofcategories   'categories.php',
      {}
    ).pipe(map((food) => food.categories.slice(0, 5))); // food.categories.slice
  }