应用过滤器时数据源突然丢失

Question

我按照 example 对下拉列表应用过滤器。

下拉列表

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

数据来自后端服务，

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

过滤器工作正常。但是有时在输入几次之后过滤器就不起作用了。 "not working" 表示下拉列表始终显示整个列表。似乎数据根本没有约束力。有时我发现 this.source 是空的。我不明白为什么。

可能 javascript 对象引用问题或 angular 呈现问题或绑定延迟异步问题？

更新：

准确地说，实际上我在屏幕上有两个下拉控件和一些 TAB。两个下拉列表并排放置。 html 格式几乎相同，不同的是数据源。一开始，过滤器运行良好。如果我多次使用 drpdown 1 中的过滤器然后移动到下拉列表 2 进行一些过滤并返回到下拉列表 1，就会发生这种情况，数据没有绑定。或者，如果我多次使用下拉列表 1 中的过滤器，然后单击 TAB 并返回到下拉列表 1，则数据也没有绑定。我的意思是两个下拉列表都没有约束力。

Answer 1

可能是我使用不当，也可能是kendo-ui的bug。

我将 [(ngModel)] 两种方式绑定和过滤放在一起。我研究了文档，没有这样的用法。使用过滤器时，应该是单向绑定而不是双向绑定。我检查了文档 https://www.telerik.com/kendo-angular-ui/components/dropdowns/dropdownlist/.

他们只是在使用过滤器时从不把 ngModel 放在那里。但是我有两个下拉列表，如果我从一个下拉列表 select ，另一个应该设置为默认值或空值。所以我需要找到一种完全不使用 ngModel 来实现它的方法。

应用过滤器时数据源突然丢失

The data source suddenly lost when applying filter

javascript

kendo-ui-angular2

angular