Angular 角垫滑块与NGRX一起使用

我正在开发一个Angular 10应用程序，在我的一个模板中，我有一个Angular Material的列表

mat expansion panel

（手风琴），它绑定到我使用NGRX选择器获得的一系列任务组

<mat-expansion-panel *ngFor="let taskGroup of taskGroups; let i = index"
  [expanded]="i == openPanelIndex"
  (click)="onClickTaskGroup($event, taskGroup)"
  (mouseover)="onMouseoverExpansionPanel(i)"
  style="width: 100%; box-sizing: border-box;">
...

<mat-list-item *ngFor="let task of tasksForSelectedTaskGroup; let i = index"
  (click)="onClickTask(task)"
  style="width: 100%;">
...

我正在尝试滑动滑块，并使用滑块的

输入

事件调度操作来更新屏幕上显示的其他组件订阅的NGRX存储中的任务。其他组件在接收到更新的任务数组后，将旋转以反映新角度

然而，我所经历的是：我滑动滑块到足以更改

输入

值的程度，存储被更新，我的选择器检测到此更改，这似乎会导致手风琴和/或任务列表刷新，滑块跳到最右边，或者它被取消选择，并阻止我滑动它。我尝试删除

[value]=“task.deviceAngle”

绑定，但没有效果。我不想使用

change

事件，因为用户在滑动滑块时需要视觉反馈

我觉得我需要在滑动滑块时断开手风琴或任务列表的更新，然后使用

change

事件可能在我完成后更新所有内容

---

欢迎您提供任何建议。

您能提供一个您的问题示例吗？我建议您在

onAngleSliderInputChange

事件上设置一个

去BounceTime

，这样您只能在滑块停止滑动时更新它，还可以将

trackBy

函数添加到您的

ngFor

。

trackBy

是一个很好的建议。我在我的应用程序的其他地方使用过它，它可能会有所帮助。我一直在研究使用

分离

和

重新连接

来控制更改检测。我会做一些测试然后回来。

...
<mat-slider color="accent"
  min="0" max="360"
  step="5" tick="1"
  thumbLabel
  [disabled]="angleDisabled"
  [value]="task.deviceAngle"
  (input)="onAngleSliderInputChange($event, task)"
  style="padding-left: 0; width: 100%"></mat-slider>