angular 8 - Ошибка при попытке изменить '[объект объекта]'. Разрешены только массивы и итерации

Question

Я хочу отобразить результаты поиска, но всякий раз, когда я пытаюсь что-либо ввести в поле поиска, в консоли отображается сообщение об ошибке. Я выбираю данные из 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>

Ответ данных

Answer 1

Попробуйте изменить свой код, как этот, посмотрите, работает ли он для вас

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

Дайте мне знать, если у вас все еще есть проблема.