Angular 5-TypeScript中的复杂对象绑定

我需要使用ngFor将webapi中的复杂对象绑定到Angular5视图，但我无法解决以下错误：

找不到类型不同的支持对象“[object]” “object”.NgFor仅支持绑定到数组等可重用项。”

我公开我的代码：

Model.ts

export interface Products {
  products: Product[];
}

export interface Product{
  id: string;
  productStats: ProductStat[];
  number: string;
}

export interface ProductStat {
  description: string;
  relevantProducts: string[];
  weight: number;
}

getProducts(productList: string[]): Observable<Products> {
    var body = JSON.stringify(productList);
    var postHeaders = new HttpHeaders();
    postHeaders = postHeaders.set('Content-Type', 'application/json');

    return this.httpClient.post<Products>(
           this.clientAppService.getProducts, body, { headers: postHeaders})
               .map(response => { return response; });
    }

productResponse: Products;

getProducts() {
    this.productsInputFormatted = this.getProductsInputFormat(this.productsInput);     
    this.productService.getProducts(this.productsInputFormatted).subscribe(
      data => {
        this.products = data;
        //I tried to convert the following line into array, 
        //but I get the same error(this.result is 
        //declared --> result: any[]; 
        //and I changed the value of NgFor in the view) 
        this.result = Array.of(this.productsResponse); 
        alert(this.result[0].products[0].id) //I can see the value
      });
  }

Services.ts

export interface Products {
  products: Product[];
}

export interface Product{
  id: string;
  productStats: ProductStat[];
  number: string;
}

export interface ProductStat {
  description: string;
  relevantProducts: string[];
  weight: number;
}

getProducts(productList: string[]): Observable<Products> {
    var body = JSON.stringify(productList);
    var postHeaders = new HttpHeaders();
    postHeaders = postHeaders.set('Content-Type', 'application/json');

    return this.httpClient.post<Products>(
           this.clientAppService.getProducts, body, { headers: postHeaders})
               .map(response => { return response; });
    }

productResponse: Products;

getProducts() {
    this.productsInputFormatted = this.getProductsInputFormat(this.productsInput);     
    this.productService.getProducts(this.productsInputFormatted).subscribe(
      data => {
        this.products = data;
        //I tried to convert the following line into array, 
        //but I get the same error(this.result is 
        //declared --> result: any[]; 
        //and I changed the value of NgFor in the view) 
        this.result = Array.of(this.productsResponse); 
        alert(this.result[0].products[0].id) //I can see the value
      });
  }

Component.html

 <tbody *ngFor="let response of products">
                      <tr>
                        <td>{{ response.products.id}}</td>
                        <td>{{ response.products.number}}</td>
                        ...

{{response.products.id}
{{response.products.number}
...

任何想法都会大有裨益

谢谢

编辑：

同样的错误还有其他疑问，但在本例中，我正确地使用了可观测函数

我还编辑以将解决方案添加到第一个答案中，并询问第二个问题：

错误：

Component.ts:

this.products=数据

Component.html:

解决方案：
在第一个答案中：

Component.ts:
this.result=Array.of（this.productsResponse）

Component.html:

第二个问题

如何访问对象的第二级（productStats.description和productStat.relevantProducts[]）

我可以将嵌套的NGFOR与ng模板一起使用吗？
您需要循环

 <tbody *ngFor="let response of results[0].products">
 <tr>
    <td>{{ response.id}}</td>
    <td>{{ response.number}}</td>


{{response.id}
{{response.number}
您能否
console.log（数据）
的可能副本，并将JSON添加到您的问题中？第二行OP上的Thanksno已使用警报（this.result[0].products[0].id）。所以这应该是解决方案！我在做的不同测试中有一个拼写错误。我是Angular和Typescript的noob，我还有另外一个问题：如何访问我的对象的第二级（productStats.description和productStat.relevantProducts[]）？我可以用嵌套的ngFors吗？非常感谢你！！