Отобразить опцию автозаполнения массива объекта в угловых 6 - PullRequest
Новая
       2

Отобразить опцию автозаполнения массива объекта в угловых 6

2 голосов
/ 19 октября 2019

Я пытаюсь реализовать автозаполнение материала в угловых 6. Я пытаюсь реализовать автозаполнение для данных поставщика вместо выпадающего. Тем не менее, я застрял в ошибке, сказав, что не повторяется на объекте. Я следую учебному руководству 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>

Однако он выдает ERROR Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays. Что это значит? Как это можно решить?

1 Ответ

1 голос
/ 19 октября 2019

Вы пропускаете трубу | async в *ngFor="let vendor of filterVendor".

Итак, с заменой на *ngFor="let vendor of filterVendor | async" вам будет хорошо идти.

См .:

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

...