Ошибка в асинхронном канале при использовании автозаполнения

Question

HTML

<mat-form-field>
<input type="text" matInput class="formControl" [formControl]="name" 
[matAutocomplete]="auto" >
      <mat-autocomplete #auto="matAutocomplete">
        <mat-option *ngFor="let option of city | async" [value]="option" >
          {{option}}
        </mat-option>
      </mat-autocomplete>
    </mat-form-field>

Машинопись

stores:locators;
city:string[]=[];
ngOnInit(){
this.service.getStores()
.subscribe(data=>{
    this.stores=data,
    this.length=this.stores.length,
    console.log("length"+this.length)
    for(let i=0;i<this.length;i++)
    {
      this.city.push(this.stores[i].city)
    }
    console.log(this.city)
   }
)

}

Интерфейс

export interface locators{
  "city":string
  "places":Array<{}>
}

Ошибка:

Ошибка: InvalidPipeArgument: ''для канала 'AsyncPipe' в invalidPipeArgumentError (common.js: 4232)

Невозможно заполнить значения автозаполнения, даже если город является массивом строк?

Answer 1

Я вижу, что city загружается асинхронно.Но так как это массив, вам не нужно ждать, пока он загрузится в ваш ngFor.Потому что ngFor никогда не будет зацикливаться, поскольку у него нет данных.Таким образом, вы не получите никаких ошибок при циклическом просмотре asynchronously loaded array data.

Только если вы обращаетесь к длине массива, где-то вроде city.length, тогда вы должны использовать оператор безопасной навигации (?.), Который будетдождитесь загрузки асинхронных данных.

{{city?.length}}

В вашем коде вам не нужна труба async

<mat-option *ngFor="let option of city" [value]="option" >
      {{option}}
</mat-option>