angular 8 - 尝试区分“[object Object]”时出错。只允许使用数组和可迭代对象答案

【问题标题】：angular 8 - Error trying to diff '[object Object]'. Only arrays and iterables are allowedangular 8 - 尝试区分“[object Object]”时出错。只允许使用数组和可迭代对象
【发布时间】：2020-05-27 15:51:34
【问题描述】：

我想显示搜索结果，但是每当我尝试在搜索框中输入任何内容时，它都会在控制台中显示错误。我正在从 api 获取数据，并根据类型在选项卡中显示结果。数据正在根据导航选项卡类型进行过滤。但现在我想搜索列出的数据，所以每当我尝试搜索时都会显示错误

TS-

  searchKeywords: string;
  CoffeeItemList: any = [];

  // tslint:disable-next-line:max-line-length
  constructor(private getDataListingService: DataListingService){}
  ngOnInit() {
    this.getGlobalSearchList('');
  }

  getGlobalSearchList(type: string) {
    this.CoffeeItemList = [];
    this.getDataListingService.getAllDataLists().subscribe(value => {
      let data = [];
      data = value.data;
      console.log(data);
      for (let i = 0; i < data.length - 1; i++) {
        if (data[i].type === type) {
            this.CoffeeItemList.push(data[i]);
        }
    }
    });
  }
  getSmartSearchValues(search: string) {
    if (search === '' ) {
      this.getGlobalSearchList('');
      return false;
    }
    this.getDataListingService.searchList(search).subscribe((data: any) => {
      this.CoffeeItemList = data;
    });

HTML

    <div class="container">
  <div class="mt-4">
    <input  class="form-control" type="text" [(ngModel)]="searchKeywords" (keyup)="getSmartSearchValues(searchKeywords)" placeholder="Search here"/>
  </div>
  <br>
  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist">
    <li class="nav-item">
      <a class="nav-link active" data-toggle="tab" href="#list" (click)="getGlobalSearchList('DancingGoatMvc-Coffee')">Coffee</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-toggle="tab" href="#list" (click)="getGlobalSearchList('DancingGoatMvc-Brewer')">Brewer</a>
    </li>
  </ul>
  <!-- Tab panes -->
  <div class="tab-content">
    <div id="list" class="tab-pane container active in"><br>
      <div class="row">

      <div class="card col-3" *ngFor="let items of CoffeeItemList">
        <div class="card-body">
          <h5 class="card-title">{{items?.title }}</h5>
          <img src="http://infogainpune.com{{items.image |slice:1}}" class="w-100"/>
          <p class="card-text">{{items?.content}}</p>
          <h4 class="card-text">${{items?.price}}</h4>
          <h4 class="card-text">{{items?.type}}</h4>
        </div>
      </div>
    </div>
    </div>
  </div>
</div>

数据的响应

【问题讨论】：

可能你正在尝试迭代对象
data 中的响应类型是什么？
medium.com/@nacimidjakirene/… 我想这会有所帮助
@tony ngo - 你能分享你发布的更新代码吗

标签： javascript node.js angular typescript ecmascript-6

【解决方案1】：

尝试像这样更改您的代码，看看它是否适合您

this.getDataListingService.getAllDataLists().subscribe(value => {
      this.CoffeeItemList = value.data;
});

如果您仍有问题，请告诉我。

【讨论】：