CategoryComponent.html:53 ERROR 错误：尝试比较“[object Object]”时出错。只允许使用数组和可迭代对象答案

【问题标题】：CategoryComponent.html:53 ERROR Error: Error trying to diff '[object Object]'. Only arrays and iterables are allowedCategoryComponent.html:53 ERROR 错误：尝试比较“[object Object]”时出错。只允许使用数组和可迭代对象
【发布时间】：2020-04-05 01:20:04
【问题描述】：

我有 angular 8 个前端，node js 是一个后端 我使用 sequelize 包在单个函数中获取了多个表结果。下面我提到后端的结果 JSON...

{
"filtergroups": [
    {
        "id": 1,
        "name": "Ram",
        "subcatId": "1",
        "childcatId": 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",
        "childcatId": 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"
            }
        ]
    }
],
"products": [
    {
        "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"
    },
    {
        "id": 2,
        "name": "A8",
        "childcatId": "1",
        "subcatId": "1",
        "price": 22000,
        "mrp": 25000,
        "discription": "7578",
        "image": "http://bestjquery.com/tutorial/product-grid/demo3/images/img-8.jpeg",
        "createdAt": "2019-11-20T00:00:00.000Z",
        "updatedAt": "2019-11-21T00:00:00.000Z"
    },
    {
        "id": 3,
        "name": "Woodland",
        "childcatId": "2",
        "subcatId": "1",
        "price": 2500,
        "mrp": 2800,
        "discription": "7575",
        "image": "http://bestjquery.com/tutorial/product-grid/demo3/images/img-7.jpeg",
        "createdAt": "2019-11-20T00:00:00.000Z",
        "updatedAt": "2019-11-13T00:00:00.000Z"
    }
]

}

这个 JSON 我在显示部分出现错误，例如

CategoryComponent.html:53 ERROR 错误：尝试 diff '[object 目的]'。只允许使用数组和可迭代对象

service.ts

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

};

我的组件.ts

   this.route.queryParams.subscribe(params => {
   this.subcat = params ['=='];
   this.childcat = params ['fil_outlet'];

if (this.subcat){

    this.categoryService.getAllProduct().subscribe((filter_groups: Filter_group[]) => {
      this.filter_groups = filter_groups;
      console.log('new Query Params:', filter_groups);
    });

   } 
});

错误

component.html

 <mat-accordion multi="true" *ngFor="let filter_group of filter_groups">
      <mat-expansion-panel>
        <mat-expansion-panel-header  >
          {{filter_group.name}}
        </mat-expansion-panel-header>
        <p >name</p>
      </mat-expansion-panel>
    </mat-accordion> <!-- filter-group  .// -->

 <div class="col-md-3 col-sm-6" *ngFor="let product of products">
          <div class="product-grid2">
            <div class="product-image2">
              <a routerLink="/categories">
                <img class="pic-1" src="{{product.image}}">
                <img class="pic-2" src="{{product.image}}">
              </a>
              <ul class="social">
                <li><a routerLink="/products" data-tip="Quick View"><i class="fa fa-eye"></i></a></li>
                <li><a href="#" data-tip="Add to Wishlist"><i class="fa fa-shopping-bag"></i></a></li>

              </ul>
              <span class="product-discount-label">40%</span>
              <a class="add-to-cart" href="">Add to cart</a>
            </div>
            <div class="product-content">
              <h3 class="title"><a routerLink="/categories">{{product.name}}</a></h3>
              <div class="price">
                {{product.price}}
                <span>{{product.mrp}}</span>
              </div>

【问题讨论】：

您的结果是复杂对象包含 2 个属性。如果您想填充产品，您需要在订阅中分配它：this.products = filter_groups.products。

标签： arrays json angular angular8 iterable

【解决方案1】：

您正在占用同时具有filter_groups 和products 的完整对象并尝试循环它。 Angular 循环遍历数组而不是对象。

您需要更改订阅中的代码

 this.categoryService.getAllProduct().subscribe((data: Filter_group) => {
      this.filter_groups = data.filtergroups;
      this.products = data.products;
      console.log('filter group:', filter_groups );
      console.log('products:', products);
    });

【讨论】：