时间戳

首页 > 解决方案 > 当孩子从远程获取时如何动态添加或删除节点

angular - 当孩子从远程获取时如何动态添加或删除节点

问题描述

   <kendo-treeview #departmentTree [nodes]="departmentList" textField="EnName" kendoTreeViewExpandable
                  kendoTreeViewSelectable kendoTreeViewHierarchyBinding [hasChildren]="hasChildren"
                  [children]="fetchChildren" (nodeClick)="onNodeClick($event)">
                  <ng-template kendoTreeViewNodeTemplate let-dataItem>
                    <span class="tree-node">
                      {{dataItem.EnName}} </span>
                  </ng-template>
                </kendo-treeview>

  public fetchChildren = (node: any): Observable < any[] > => {
    return this.httpService.getDepartment(node.DepartmentId);
  }

我想将新节点插入现有树视图而不刷新。（比如推入现有数组）我尝试将子节点推入选定的数据项 this.selectedNode.items.push(newItem) 我没有找到任何文档

标签： angularkendo-uikendo-ui-angular2kendo-treeview

解决方案

我想将新节点插入现有的树视图

包括 Angular 在内的前端框架背后的整个想法是使用您提供的声明性模板（如@Component#template或@Component#templateUrl）来更改数据并让框架更改视图。

不刷新

单页应用程序中的所有内容都无需刷新即可完成。这就是重点，这就是它们被称为单页应用程序的原因：没有浏览器从服务器获取的传统页面的概念：所有更改都是通过客户端 JavaScript 完成的，包括由路由器的 JavaScript 实现（常见的选择是@angular/router）。

（如推入现有数组）

这正是你必须做的。Angular 将处理更新视图，除非组件构建不正确或进行了高度优化，因此需要手动更改检测周期触发器，但您可能知道这些情况何时出现，所以我认为您不必担心这一点.

我尝试将子节点推入选定的数据项 this.selectedNode.items.push(newItem)

那么还有其他问题。尝试将整个数组作为 JSON 打印到页面，看看它是否正在改变：{{ selectedNode.items | json }}。

我将用一个具体的原因来更新答案，为什么您在添加缺少的详细信息时没有看到视图发生变化。以上是可以帮助其他人更好地理解为什么视图可能不会更新的总体思路。

推荐阅读