当我想在 html 中获取我的产品时，我遇到了这个“尝试区分'[object Object]'时出错。只允许数组和可迭代”的问题

这是我的 product.ts

export interface Pizzas{
  _id:string;
  name: string;
  description: string;
  grade: number;
  price: number;
  discount: boolean;
  picture: string;
}

这是我的 service.ts

import { Injectable } from '@angular/core';
import { HttpClient, HttpErrorResponse } from '@angular/common/http';
import {Pizzas} from './product';
import { catchError, Observable, throwError} from 'rxjs';
import {tap} from 'rxjs/operators';


@Injectable({
  providedIn: 'root'
})
export class ProductsService {

  private url ='http://localhost:3000/api/pizzas';

  constructor(private http:HttpClient) { }

  

  getProducts(): Observable<Pizzas[]>{
    return this.http.get<Pizzas[]>(this.url).pipe(tap(data => console.log('All ', JSON.stringify(data))),
    catchError(this.handleError)
    ); 
  }
}

在这个 console.log 中一切看起来都很好，它显示了来自 json 文件的数据

这是我的 component.ts

import { Component, OnInit, OnDestroy } from '@angular/core';
import { Subscription } from 'rxjs';
import {Pizzas} from './product';
import {ProductsService} from './products.service'



@Component({
  selector: 'app-products',
  templateUrl: './products.component.html',
  styleUrls: ['./products.component.css']
})
export class ProductsComponent implements OnInit {
  errorMessage: string =' ';
  sub!: Subscription;

  
  products : Pizzas[] =[];

  constructor(private producstService: ProductsService){ }
     
  

  ngOnInit(): void {
    
    this.sub = this.producstService.getProducts().subscribe({
      next: products => {
        this.products = products;        
      },
      error: err => this.errorMessage =err
    });
  }

}

这是我的html

<div *ngFor="let product of products">
  <p> {{product.name}}</p>
</div>

console.log 中的输出是

All {"results":[{"_id":"1","name":"Hawaiian Pizza","description":"This crowd-pleasing recipe starts with my fluffy homemade pizza crust and is finished with a sprinkle of crisp bacon. Enjoy the unique flavor combination of bacon and pineapple. It’s love at first bite.","grade":3.2,"price":9.99,"discount":true,"picture":"hawaiian-pizza.jpg"},{"_id":"2","name":"Meat Lover's","description":"This hefty, cheesy meal on a crust is packed with three different kinds of meat and simply fantastic flavor. Homemade Italian sausage, apple-smoked bacon, and all-natural uncured pepperoni make this pizza a meat-lover's dream.","grade":4.5,"price":10.49,"picture":"meat-lovers.jpg"},{"_id":"3","name":"Margherita","vegetarian":true,"description":"Sometimes you just can’t beat fresh, simple, and classic Margherita Pizza. This most iconic of pizzas is topped with tomato sauce, fresh mozzarella, and basil leaves, the colors of the Italian flag.","grade":4.8,"price":8,"picture":"margherita.jpg"},{"_id":"4","name":"Quattro Formaggio","vegetarian":true,"description":"This is the classic version of one of the most wonderful combinations of bread and cheese imaginable. If you like cheese, you'll absolutely love this four-cheese pizza dish! The combination of Ricotta, Mozzarella, Gorgonzola, and Parmesan","grade":3.4,"price":11.49,"picture":"quattro-formaggio.jpg"},{"_id":"5","name":"Veggie","vegetarian":true,"description":"There's no need to bring confetti to your next snack-time gathering. Just carry in this colorful pizza that's topped with a rainbow of crunchy vegetables!","grade":2.4,"price":5.49,"discount":true,"picture":"veggie.jpg"},{"_id":"6","name":"Calzone","description":"Experience the taste of an Italian pizzeria with our Italian-style Calzone. Folded pizza richly filled with mushrooms, salami, ham, tomato sauce and cheese, then sprinkled with cheese and herbs.","grade":3.6,"price":8.38,"picture":"calzone.jpg"},{"_id":"7","name":"Pizza Pepperoni-Salame","description":"Certain to be a favourite among meat lovers, this pizza blends delicious slices of mild salami with smaller, hotter pepperoni pieces.  The fiery tastes are balanced with the delicate mozzarella and Edam cheese flavours.","grade":3.9,"price":7.99,"discount":true,"picture":"pepperoni-salame.jpg"},{"_id":"8","name":"Pizza Funghi","vegetarian":true,"description":"This popular vegetarian pizza is topped with the finest aromatic mushrooms, juicy mozzarella and Edam cheeses, and finished with a herb garnish.","grade":2.8,"price":6.42,"discount":true,"picture":"funghi.jpeg"},{"_id":"9","name":"Pollo Arrabiata","description":"The latest addition to the Nation's Favourite thin & crispy menu is generously topped with chicken, red pepper, red onion, mozzarella and Edam cheeses, and a spicy Roquito garnish sauce.","grade":3.2,"price":11.29,"picture":"pollo-arrabiata.jpg"},{"_id":"10","name":"Bolognese","description":"Experience the taste of an Italian Pizzeria with our thin and crispy, Italian-style pizza, deliciously topped with mozzarella and Edam cheeses, minced beef, tomato pieces and onions. Why not try some of our other delicious varieties.","grade":3.7,"price":9.99,"discount":true,"picture":"bolognese.jpg"},{"_id":"11","name":"Mozzarella","description":"The wonderful aroma of fresh mozzarella cheese provides this pizza with its elegant taste and is the perfect combination with tomatoes, Edam cheese and a delightful mix of pesto.","grade":2.9,"price":7.99,"picture":"mozzarella.jpg"},{"_id":"12","name":"Pizza Speciale","description":"Ham and salami make this pizza a special culinary feast! Gouda cheese, mushrooms,and spicy herbs add to the full flavour.","grade":3.8,"price":10.22,"picture":"pizza-speciale.jpg"}]} ```

getProducts(): Observable<Pizzas[]>{
    return this.http.get<Pizzas[]>(this.url).pipe(
       map(data => data.products),
       catchError(this.handleError)
     ); 
}