CategoryComponent.html:53错误错误:尝试与'[object Object]'进行比较时出错。仅允许数组和可迭代项

时间:2019-12-11 17:34:15

标签: arrays json angular angular8 iterable

我有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错误错误:尝试区分'[对象   宾语]'。仅允许数组和可迭代对象

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");

};

我的component.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);
    });

   } 
});

错误  enter image description here

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>

1 个答案:

答案 0 :(得分:0)

您要占用同时具有filter_groupsproducts的完整对象,并尝试对其进行循环。角遍历数组而不是对象。

您需要在订阅中更改代码

 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);
    });