问题描述

我创建了一个用于http api获取数据的自动完成控件。

但是<mat-option *ngFor="let region of regions" [value]="region.name">会抛出这样的错误：
Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.

我检查了第 52 行Region[]中的数据返回。method 1

我用谷歌搜索解决方案method 2，它有效但无法使用loading indicator

我希望有人能帮帮我。谢谢。

我的代码：https ://stackblitz.com/edit/angular-89p1pm

我有3个问题要问：

错误弹出
方法1：不显示国家列表
如何处理Observable with loading indicator

方法一

form.get('region').valueChanges.pipe(
  debounceTime(300),
  tap(r => this.isLoading = true),
  switchMap(inputCountry => 
    this.regionService.getRegions().pipe(
      map( regions => {
        return regions.filter(region => region.name.indexOf(inputCountry) >= 0)
      })
    )
  )
).subscribe(data => {
  console.log('onRegionChanged: data', data);
  this.isLoading = false;
  this.regions = data;
})

方法二

form.get('region').valueChanges.pipe(
      debounceTime(300),
      tap(r => this.isLoading$.next(true)),
    ).subscribe(inputCountry => {
      this.regions$ = this.regionService.getRegions().pipe(
        tap(r => this.isLoading$.next(false)),
        map(regions => regions.filter(region => region.name.indexOf(inputCountry) >= 0))
      )
    });

标签： angularangular-material

angular - 关于材料设计自动完成的角度问题

问题描述

方法一

方法二

解决方案

推荐阅读