如何使用 selectionmodel 实现对所有树项的选择？答案

【问题标题】：How to implement selection of all tree items using selectionmodel?如何使用 selectionmodel 实现对所有树项的选择？
【发布时间】：2020-12-14 06:52:42
【问题描述】：

我有一棵树，里面有一些项目。我像这样组织了选项列表更改活动。

checklistSelection = new SelectionModel<TodoItemFlatNode>(true);
this.checklistSelection.changed.subscribe(data => {
  this.selectedEmit.emit(this.checklistSelection.selected.map(s => s.item));
});

以前，用户只能通过单击来选择树元素。一切都很好。我现在添加了一个“全选”按钮。

public SelectAllNode(): void {
 this.checklistSelection.clear();
 if (this.isCheckedAllNode) {
   for (let dataNode of this.treeControl.dataNodes) {
     this.checklistSelection.select(dataNode);
   }
 } else {
   for (let dataNode of this.treeControl.dataNodes) {
     this.checklistSelection.deselect(dataNode);
   }
 }
}

我的树中有 3000 多个项目。当用户单击此按钮时，会发生 3000 个事件 - 非常不切实际。请告诉我如何最好地组织所有元素的选择？例如，取消订阅一个事件，最后再订阅一次？

【问题讨论】：

标签： angular typescript tree selectall

【解决方案1】：

当我这样做时，问题似乎消失了：

public SelectAllNode(): void {
  this.checklistSelection.clear();
  if (this.isCheckedAllNode) {
    this.checklistSelection.select(...this.treeControl.dataNodes);
  } else {
    this.checklistSelection.deselect(...this.treeControl.dataNodes);
  }
}

但我不知道这有多好。

【讨论】：