Угловой 7: Не удается найти другой поддерживающий объект '[object Object]' типа 'object'.NgFor поддерживает только привязку к итерациям, таким как массивы

Question

Существует раскрывающийся список переключения данных, который заполняется из http-запроса.

<div class="dropdown">
 <input #searchInput class="dropdown-toggle" type="text" id="dropdown-input" placeholder=" " autocomplete="off"
     (input)="handleChange(searchInput.value)"
     data-toggle="dropdown">

<ul class="dropdown-menu scrollable-menu" role="menu">
<ng-template [ngIf]="isAsync">
  <li class="dropdown-item" *ngFor="let d of asyncData$ | async">{{valueAttribute ? d[valueAttribute] : d }}</li>
</ng-template>

Я использую Angular async pipe, как в приведенном выше коде. И я попробовал ниже.

  ngOnInit() {

    this.asyncData$ = this.searchTerms.pipe(
    // wait 300ms after each keystroke before considering the term
    debounceTime(300),

    // ignore new term if same as previous term
    distinctUntilChanged(),

    // switch to new search observable each time the term changes
    switchMap((term: string) => this.retrieveData(term)),
);

}

retrieveData(term: string) {
 let options: any = {};
 if (this.queryParamName) {
   options.params = {};
   options.params[this.queryParamName] = term;
 }
 return this.http.get(this.url, options);

}

Http-вызов возвращает успешный ответ, но возникает следующая ошибка.

Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.

Любые предложения приветствуются.

Спасибо!

Answer 1

Похоже, что значения, излучаемые asyncData$, являются объектами, а не массивами.Вы можете преобразовать их в массивы, используя Object.keys(), Object.values().

. Вы также можете использовать встроенный канал значения ключа:

<div *ngFor="let d of asyncData$ | async | keyvalue">
  {{ d.key }} {{ d.value }}
</div>