angular - 以 Angular 6 显示对象数组的自动完成选项

Question

我正在尝试在 Angular 6 中实现 Material Autocomplete。我试图为供应商数据实现自动完成而不是下拉。但是，我被错误提示无法在对象上迭代。我遵循 stackblitz 的教程 https://stackblitz.com/edit/am-all-imports-kojajh?file=app%2Fapp.component.ts .仍然有这些错误。我的 component.ts 文件

export interface IVendor {
    VendorId: string;
    VendorName: string;
}

--------------------Var declarations-------
filterVendor: Observable<IVendor[]>;
VendorCtrl = new FormControl();
vendorArr = [];

    vendors: IVendor[] = [
        { "VendorId": "1234", "VendorName": "anjan" },
        { "VendorId": "12344", "VendorName": "asus" },
        { "VendorId": "12345", "VendorName": "sujan" },
        { "VendorId": "12347", "VendorName": "sudip" },
        { "VendorId": "12349", "VendorName": "ram" },
        { "VendorId": "12340", "VendorName": "shyam" },
        { "VendorId": "12341", "VendorName": "hari" },
        { "VendorId": "12342", "VendorName": "ganesh" },
        { "VendorId": "12343", "VendorName": "kesab" },
        { "VendorId": "12348", "VendorName": "laxman" },
        { "VendorId": "12346", "VendorName": "laxmi" },
        { "VendorId": "123421", "VendorName": "rani" },
    ]

ngOnInit() {
   this.filterVendor = this.VendorCtrl.valueChanges
          .pipe(
              startWith(''),
              map(option => option ? this._filterVendor(option) : this.vendors.slice())

          );
}

_filterVendor(name: string) {
        return this.vendors.filter(opt =>
            opt.VendorName.toLowerCase().indexOf(name.toLowerCase()) === 0);
    }

displayFn(ven?: IVendor): string | undefined {
        return ven ? ven.VendorName : undefined;
    }

然后是html文件

<mat-form-field>
  <input matInput placeholder="VendorName" [matAutocomplete]="auto" [formControl]="VendorCtrl" 
                      formControlName="VendorId" />
     <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn">
      <mat-option *ngFor="let vendor of filterVendor" [value]="vendor.VendorId">
         <span>{{vendor.VendorName}}</span> 
       </mat-option>
   </mat-autocomplete>
</mat-form-field>

然而它抛出错误错误:找不到类型为“object”的不同支持对象“[object Object]”。 NgFor 仅支持绑定(bind)到 Iterables，例如数组。这是什么意思？如何解决？

Answer 1

你错过了| *ngFor="let vendor of filterVendor" 中的异步 管道。

因此，将其替换为 *ngFor="let vendor of filterVendor | async" 就可以了。

参见:

https://angular.io/api/common/AsyncPipe