Question

CategoryComponent.html：57错误错误：找不到类型为“三星”的其他支持对象“ [对象对象]”。 NgFor仅支持绑定到Iterables，例如数组。我只能显示无法使用此代码的产品数组

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

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

如果您有可能拥有一个空的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的某种包装即可。请记住，如果子猫中的子猫有可能为空，那么您也必须对此进行检查。（未显示）

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

1 个答案: