如何从嵌套的json数组中获取特定的对象值

Question

CategoryComponent.html:57 ERROR 错误：找不到类型为“Samsung”的不同支持对象“[object Object]”。 NgFor 仅支持绑定到 Iterables，例如 Arrays。 我只能显示产品数组休息它不适用于此代码

这是我在控制台中遇到的错误

 <mat-accordion multi="true"  *ngFor="let item1 of products">
      <mat-expansion-panel  *ngFor="let item2 of item1.childcat">
        <mat-expansion-panel-header *ngFor="let item3 of item2.subcat">
          {{item2.name}}{{ item3.name}}
        </mat-expansion-panel-header>
        <p>HAlo</p>
      </mat-expansion-panel>
    </mat-accordion> <!-- filter-group  .// -->

我的组件

 this.route.queryParams.subscribe(params => {
 this.categoryService.getProduct().subscribe(products => this.products = products) 

服务文件

 getProduct(): Observable<Product[]>{
let params_url = new HttpParams().set('fil_outlet',this.name);
console.log('new my ss--',this.name);
return this.http.get<Product[]>("http://localhost:4500/products",{params:params_url});

};

JSON

[
{
    "id": 1,
    "name": "A7",
    "childcatId": "1",
    "subcatId": "1",
    "price": 18000,
    "mrp": 21000,
    "discription": "sfhshsfhsf",
    "image": "http://bestjquery.com/tutorial/product-grid/demo3/images/img-7.jpeg",
    "createdAt": "2019-11-13T00:00:00.000Z",
    "updatedAt": "2019-11-14T02:00:00.000Z",
    "childcat": {
        "id": 1,
        "name": "samsung",
        "categoryId": "1",
        "subcatId": "1",
        "createdAt": "2019-11-21T00:00:00.000Z",
        "updatedAt": "2019-11-21T00:00:00.000Z",
        "subcat": {
            "id": 1,
            "name": "Mobile",
            "categoryId": "1",
            "createdAt": "2019-11-19T00:00:00.000Z",
            "updatedAt": "2019-11-05T00:00:00.000Z",
            "filter_groups": [
                {
                    "id": 1,
                    "name": "Ram",
                    "subcatId": "1",
                    "createdAt": "2019-11-13T00:00:00.000Z",
                    "updatedAt": "2019-11-13T00:00:00.000Z",
                    "filters": [
                        {
                            "id": 1,
                            "name": "2 GB",
                            "filterGroupId": "1",
                            "productId": "1",
                            "createdAt": "2019-11-19T00:00:00.000Z",
                            "updatedAt": "2019-11-27T00:00:00.000Z"
                        }
                    ]
                },
                {
                    "id": 2,
                    "name": "Internal Storage",
                    "subcatId": "1",
                    "createdAt": "2019-11-05T00:00:00.000Z",
                    "updatedAt": "2019-11-24T00:00:00.000Z",
                    "filters": [
                        {
                            "id": 2,
                            "name": "8 GB",
                            "filterGroupId": "2",
                            "productId": "1",
                            "createdAt": "2019-11-20T00:00:00.000Z",
                            "updatedAt": "2019-11-20T00:00:00.000Z"
                        }
                    ]
                }
            ]
        }
    }
}

]

Answer 1

您正在尝试对对象而不是数组调用 *ngFor。您所做的只是简单地调用项目本身。请参阅以下代码。

 <mat-accordion multi="true">
      <mat-expansion-panel  *ngFor="let item1 of products">
        <mat-expansion-panel-header>
          {{item1.childcat.name}}{{ item1.childcat.subcat.name}}
        </mat-expansion-panel-header>
        <p>HAlo</p>
      </mat-expansion-panel>
    </mat-accordion> <!-- filter-group  .// -->

如果您有可能有一个 null childcat，那么您可以使用 ngIf 稍微修改代码。

<mat-accordion multi="true">
  <mat-expansion-panel  *ngFor="let item1 of arrObject">
    <mat-expansion-panel-header>
      <p *ngIf="item1.childcat">{{item1.childcat.name}}{{ item1.childcat.subcat.name}}</p>
    </mat-expansion-panel-header>
    <p>HAlo</p>
  </mat-expansion-panel>
</mat-accordion> <!-- filter-group  .// -->

您不必为此使用 p 标签，而只需使用某种使用 if 的包装器。请记住，如果您的 childcat 中的 subcat 有可能为 null，您也必须对此进行检查。 （未显示）