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

CategoryComponent.html:57错误：找不到类型为“Samsung”的不同支持对象“[object]”。NgFor只支持绑定到数组之类的可重用文件。 我只能显示产品阵列rest，因为它不使用此代码

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

 <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  .// -->

服务文件

---

]

您试图在对象而不是数组上调用*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  .// -->

{{item1.childcat.name}{{item1.childcat.subcat.name}
光环

如果您可能有一个空的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  .// -->

{{item1.childcat.name}{{item1.childcat.subcat.name}

光环

---

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

您正在尝试迭代item1.childcat。childcat不是数组，而是对象。因此出现了错误。有一个单独的childcat，你为什么要重复它？另外，为什么方法返回名为getProduct（）的产品数组。正确使用英语的单数和复数形式会使事情变得容易得多。命名variable

product

而不是

item1

也会使事情变得更简单。但是当我使用{{item1.childcat.name}时，它的显示无法读取未定义的属性“name”，这很可能意味着产品对象中的childcat对象为null。

[
{
    "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"
                        }
                    ]
                }
            ]
        }
    }
}

 <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  .// -->

<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  .// -->