ERROR TypeError: Cannot read properties of undefined (reading 'filter') using Autocomplete-CodePudding

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')

CodePudding user response：

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())
    );
  }