Я создал элементы автозаполнения с 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.
Я проверил возврат данных Region[] в method 1, строка 52.
И я ищу решение method 2, оно работает, но не может работать с loading indicator
Я надеюсь, что кто-нибудь может мне помочь. Спасибо.
Мой код: https://stackblitz.com/edit/angular-89p1pm
У меня есть 3 вопроса:
- ошибка всплывающего окна
- способ 1: не показывать список стран
- как обращаться с
Observable with loading indicator
метод 1
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;
})
метод 2
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))
)
});