I'm using Autocomplete in Angular
<input type="text" matInput [ngModel]="chatList" [matAutocomplete]="autocopmlete" (focus)="filter('')" (ngModelChange)="filter($event)">
<mat-autocomplete #autocopmlete="matAutocomplete" [displayWith]="displayName">
<mat-option *ngFor="let item of filteredObject" [value]="item" (onSelectionChange)="selectUser(item)">
{{ item.Name }}
</mat-option>
</mat-autocomplete>
i have this filter function in my .ts file
filter(value = '') {
if (typeof value !== 'string' || typeof value === 'undefined') {
return;
}
this.filteredObject = this.chatList.filter(
a => ~a.Name.toLocaleLowerCase().indexOf(value.toLocaleLowerCase())
);
}
filter is working but when i load my page and put focus on search textfield then getting this error :
ERROR TypeError: Cannot read properties of undefined (reading 'filter')
I think the problem in chatList, you can add a condition to solve that:
filter(value = '') {
if (typeof value !== 'string' || typeof value === 'undefined') {
return;
}
this.filteredObject = (this.chatList || []).filter(
a => ~a.Name.toLocaleLowerCase().indexOf(value.toLocaleLowerCase())
);
}