使用自定义Service

Question

我有一个带有（selectionChange）属性的Kendo-Grid，我使用自定义Selectionservice.ts进行选择：

(selectionChange)="selectionService.onSelectionChange($event)"

我的SelectionService是自定义的，因为我具有不同的功能，但是否选择了一个项目[1]或两个[1,2]。如果选择了第三行，则第三行应移出第一个，因此该行将是[2,3]。我的代码在这里：

public onSelectionChange(event: SelectionEvent): void {
  if (this.selectedItems!.length + event.selectedRows!.length > 2) {
    this.selectedItems.shift();
  }

  for (let row of event.selectedRows!) {
    this.selectedItems!.push(row.dataItem);
  }

  this.selectedItems = this.selectedItems!.filter(
    item => !event.deselectedRows!.some(row => row.dataItem === item)
  );
}

我的问题是我的选择工作，但是从视觉上讲，Kendo仍然可以保留先前选择的行。我该如何做到这一点，因此，如果选择了第三个项目，则网格也取消选择此项目？

Answer 1

push

时，

unshift

数组参考保持不变，kendo组件依赖于此

array memory reference change

来通过

ngOnChanges()

触发更改检测，因此您只需要执行

array Destructuring

即可更新内存参考.

public onSelectionChange(event: SelectionEvent): void {
  if (this.selectedItems!.length + event.selectedRows!.length > 2) {
    this.selectedItems.shift();
  }

  for (let row of event.selectedRows!) {
    this.selectedItems!.push(row.dataItem);
  }

  this.selectedItems = this.selectedItems!.filter(
    item => !event.deselectedRows!.some(row => row.dataItem === item)
  );
  this.selectedItems = [...this.selectedItems]; // <- notice!
}