自动完成TypeError

时间:2019-01-23 15:35:46

标签: angular autocomplete angular-material material angular-material-6

我正在通过Rest从外部服务器加载列表。该列表不会显示,并且当您键入一个值时,控制台会提示以下错误: core.js:14597错误TypeError:account.Name.toLowerCase不是函数

COMPONENT.ts

export class OrderintakeComponent implements OnInit {
  soldTo = new FormControl();
  accounts: AccountModel[];
  filteredSoldto: Observable<AccountModel[]>;

  constructor(
    private _formBuilder: FormBuilder,
    private accountsService: AccountsService, {
    this.accounts = accountsService.getAccounts().Documents;
    console.log(this.accounts);
    this.filteredSoldto = this.soldTo.valueChanges
    .pipe(
      startWith(''),
      map(soldto => soldto ? this._filter(soldto) : this.accounts.slice())
    );
  }

  private _filter(value: string): AccountModel[] {
    const filterValue = value.toLowerCase();
    console.log(filterValue);
    return this.accounts.filter(account => account.Name.toLowerCase().includes(filterValue));
  }

COMPONENT.html

  <mat-form-field class="full-width">
    <input type="text" placeholder="Sold To" aria-label="Sold To" matInput [formControl]="soldTo" [matAutocomplete]="auto">
    <mat-autocomplete #auto="matAutocomplete">
      <mat-option *ngFor="let account of filteredSoldto | async" [value]="account">
        {{ account.Name }}
      </mat-option>
    </mat-autocomplete>
  </mat-form-field>

此帐户的内容

0: {id: "c5826db5-d68b-4be8-84ed-c4cc3c15cd5a", _rid: "R-UdANZutGwJAAAAAAAAAA==", _self: "dbs/R-UdAA==/colls/R-UdANZutGw=/docs/R-UdANZutGwJAAAAAAAAAA==/", _etag: ""06000f28-0000-0c00-0000-5c34d2830000"", Account Number: "90564412-100490", …}
1: {id: "59302f1f-a48f-447a-8e2a-ed4520c13d1f", _rid: "R-UdANZutGwKAAAAAAAAAA==", _self: "dbs/R-UdAA==/colls/R-UdANZutGw=/docs/R-UdANZutGwKAAAAAAAAAA==/", _etag: ""06001028-0000-0c00-0000-5c34d2830000"", Account Number: "90164412-100492", …}....

显示的列表应根据输入内容进行过滤

我使用状态自动完成演示作为参考: https://material.angular.io/components/autocomplete/examples

0 个答案:

没有答案