Я загружаю список через 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>
CONTENT of this.accounts
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