【问题标题】:How to keep track of changes in Array in Angular如何在 Angular 中跟踪 Array 的变化
【发布时间】:2019-12-22 19:45:29
【问题描述】:

我正在使用 Kendo Treeview 控件,并且需要能够在用户选中或取消选中某个项目时处理对我的后端的更新。它发出一个checkedChange,它为我提供了一个包含已检查项目和所有子项的对象,但它没有告诉我该项目是否已检查。有一个 selectedKeys 集合存储所有选定的键,但似乎在触发 checkChange 事件后更新,这意味着我不会得到正确的答案,因为新检查的项目不在集合中。有没有办法让查找等到集合更新? 还有一种方法可以在更新后获取集合的更改,也许我可以使用 taht 来确定添加和删除了哪些键?

这里是 StackBlitz 示例,它使用了组件 StackBlitz Sample

【问题讨论】:

  • 请在此处添加一个最小的代码示例,以便我们看到您在做什么。
  • 它在堆栈闪电战中准确显示正在发生的事情,没有办法提供有意义的短片
  • 引用:“......它没有告诉我该项目是否被检查......”。是的,它确实。在您自己的示例中,console.log(this.checkedKeys.indexOf($event.item.dataItem.guid)); 这一行在控制台中打印 -1 如果项目的新状态被选中,前一个索引如果未选中并从列表中删除。
  • 有问题,因为在checkedKeys更新之前点击触发,结果是相反的。当它被选中时,它表示索引为 -1,这意味着它不在数组中,然后当你取消选中它时,它会显示索引,因为它在被删除之前当前在数组中。
  • 您还能要求什么?您知道哪些键被选中或未选中,并且只将这些键发送到您的后端进行更新。另一方面,您为什么要关心在checkedChange 之前触发onClick?您的示例中没有使用 onClick,也不需要它。

标签: angular kendo-ui


【解决方案1】:

使用您已经有处理程序的checkedKeysChange -event:

(checkedKeysChange)="selectUpdate($event)"

您可以访问更新后的选定键数组。

根据您的代码检查此 Stackblitz:https://stackblitz.com/edit/kendo-tree-remote-data-vmrria

【讨论】:

  • 我不希望所有的键我只想知道被点击的复选框以及它是否被选中。你告诉我的是我已经拥有的
  • 你检查过我制作的 Stackblitz 示例吗?它显示了所有 选中 键。结合我在其他评论中所说的话 - “引用:”......它没有告诉我该项目是否被检查......“。是的。在你自己的例子中,这条线 console.log(this.checkedKeys. indexOf($event.item.dataItem.guid)); 如果项目的新状态被选中,则在控制台中打印 -1,如果未选中并从列表中删除,则打印前一个索引。-"。你有你想要的一切!
  • 我从一开始的问题是如何确保在检查项目是否在数组中之前更新密钥。如果某些代码在数组中然后在另一个调用中 > -1,则我不是一个好的做法。在我发布如何解决问题的问题之前,我们正在讨论我所知道的事情。
  • 请再次阅读您的问题。你说过,“有一个 selectedKeys 集合存储所有选定的键,但似乎在触发 checkChange 事件后更新,这意味着我不会得到正确的答案,因为新检查的项目不在集合中。”。你是对的, selectedKeys 在checkedChange 被触发后更新。但是还有另一个事件checkedKeysChange。当它触发时,selectedKeys 已经更新。
猜你喜欢
  • 2013-06-04
  • 1970-01-01
  • 2015-12-07
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多