Question

   <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);
  }

我想在不刷新的情况下将新节点插入现有的Treeview中。（如推送到现有数组中）我尝试将子节点推送到选定的dataItem中 this.selectedNode.items.push(newItem) 我没有为此找到任何文档

Answer 1

我想在现有的树形视图中插入新节点

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

不刷新

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

（就像推入现有数组一样）

这正是您要做的。除非组件构建不正确或经过高度优化，因此需要手动更改检测周期触发器，否则Angular会处理视图的更新，但是您可能知道何时会发生这些情况，因此我认为您不必为此担心

我尝试将子节点推入选定的dataItem this.selectedNode.items.push（newItem）

那么其他地方是错误的。尝试将整个数组作为JSON打印到页面上以查看其是否在更改：{{ selectedNode.items | json }}。

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

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

1 个答案: