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：＆＃39;＆＃39; for pipe＆＃39; AsyncPipe＆＃39; 在invalidPipeArgumentError（common.js：4232）

无法填充自动填充值，即使city是一个字符串数组？

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>

使用自动完成时异步管道出错

1 个答案: