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 管道，如上面的代码所示。我在下面尝试过。

  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>

角度7：找不到类型为“对象”的其他支持对象“ [对象对象]”。 NgFor仅支持绑定到可迭代对象，例如数组

1 个答案: