The data source suddenly lost when applying filter

Question

I followed the example to apply a filter to the drop down list.

The drop down list

 <kendo-dropdownlist
        [data]="data"
        [(ngModel)]="selectedItem"
        [filterable]="true"
        [textField]="'text'"
        [valueField]="'value'"
        (filterChange)="handleFilter($event)"
    >
 </kendo-dropdownlist>

The data is from back end service,

export class AppComponent implements OnInit {
public source: Array<myClass> = [];
public data: Array<myClass> = [];
public selectedItem: myClass;
constructor() {
    this.data = this.source.slice();
}

ngOninit() {
    this.getDataFromService();
}

public getDataFromService = () => {
    //  get data from backend
    this.service['myService'].get().subscribe(response => {
         this.source = response;
         thid.data = response;
    };
}

public handleFilter(value: any): void {
    console.log(this.source);
    this.data = this.source.filter((s) => s.text.toLowerCase().indexOf(value.toLowerCase()) !== -1);
 }
}

The filter works fine. However sometimes after typing several times then the filter is not working. The "not working" means the dropdown list always displays the whole list. It seems the data is not binding at all. Sometimes I found that the this.source is empty. I don't why.

Maybe javascript object reference issue or angular render issue or binding delay async issue?

UPDATE:

To be accurate, actually I have two dropdown controls and some TABs on the screen. Two dropdown list sit side by side. The html format are almost same, the different is the data source. At the beginning, the fileters are working well. It happens if I used the filter in drpdown 1 for several times then moved to dropdown 2 do some filtering and go back to dropdown 1, the data is not binding. Or If I used the filter in dropdown 1 for several times then clicking a TAB and go back to dropdown 1, then the data is not binding as well. I meant that both of the dropdown list are not binding.

Answer 1

Maybe I used it incorrectly or maybe a bug of kendo-ui.

I put [(ngModel)] two way binding and filter together. I studied the document, there is no such an usage. When using filter, it should be one way binding instead of two way binding. And I checked the document https://www.telerik.com/kendo-angular-ui/components/dropdowns/dropdownlist/.

They just never put ngModel there when using filter. However I have two dropdown lists, if I select from one, the other one should be set as default or null. So I need find a way to implement it without using ngModel at all.