CODEWITHSUNDEEP
angularangular-material
john chan
john chan

Reputation: 223

Angular issue about autocomplete of material design

I have created an autocomplete controls with http api getting data.

But <mat-option *ngFor="let region of regions" [value]="region.name"> is throw an error like this:
Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.

I have checked the data returns Region[] in method 1 , line 52.

And I google for solution method 2, it works but not able to work with loading indicator

I hope someone can give a hand to me. Thanks.

My code: https://stackblitz.com/edit/angular-89p1pm

I have 3 questions to ask:

Method 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;
})

Method 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))
      )
    });

Upvotes: 0

Views: 85

Answers (1)

user4676340
user4676340

Reputation:

Stackbltiz

Your issue is that you're iterating over an empty array. Just add it to your condition. 

<ng-container *ngIf="!isLoading && regions?.length">

Upvotes: 1

Related Questions