Angular5。我无法在* ngFor中显示嵌套的json对象

Question

我无法在HTML模板中显示给定类别的所有产品。页面加载时，它在chrome控制台中向我显示了此问题：

  

错误：找不到类型为“对象”的其他支持对象“ [对象对象]”。 NgFor仅支持绑定到诸如数组之类的Iterables

我的服务

    getCategoriesById(id) {
    return this.http.get<Categories[]>('http://localhost:61085/api/Categories/GetCategoriesById/' + id);
  }

我的组件：

 export class CategoriesDetailsComponent implements OnInit {
  listCategories:  Categories[] = [];
  constructor(private activatedRoute: ActivatedRoute, private productService: CategoriesProductsService) { }

  ngOnInit() {
    this.displayProductsByCategoryId();
  }
  displayProductsByCategoryId() {
    const id = +this.activatedRoute.snapshot.params['id'];
    this.productService.getCategoriesById(id).subscribe((data) => {
      this.listCategories = data;
      console.log(this.listCategories);
    });
}
}

HTML模板：

    <div class="row">
<div class="col-sm-4" style="cursor: pointer;" *ngFor="let categories of listCategories " [routerLink]="['/products-details', categories.Id]" >
  <div *ngFor="let product of categories.Product">
    <h3 style="text-align: center">Product Name: {{product.Product.Name}}</h3>
  <img class="img-fluid" src="{{product.Product.Image}}">
  <p style="color: yellow">Price: {{product.Product.Price}}PLN</p>
</div>
</div>

模型类别和产品类别：

 export class Categories {
  Id: number;
  Name: string;
  Product: Products;
}

export class Products {
  Id: number;
  Name: string;
  Description: string;
  DetailedDescription: string;
  Price: string;
  IsNewProduct: boolean;
  PromotionalProduct: boolean;
  Image: string;
  CategoryId: number;
}

欢迎任何帮助或建议。

Answer 1

问题在这里

 export class Categories {
  Id: number;
  Name: string;
  Product: Products[]; // this needs to be an array
}

Answer 2

您从API获得的响应属于特定类别。并且该类别具有Products属性，该属性是一个数组，可以对产品数组使用* ngFor而不是单个类别。