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

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

我想在现有的treeview中插入新的节点

前端框架(包括角)背后的全部思想是使用您提供的声明性模板(如@Component#template或@Component#templateUrl)更改数据并让框架更改视图。

不刷新

单页应用程序中的所有操作都不需要刷新。这就是为什么它们被称为单页应用程序的原因:浏览器没有从服务器获取传统页面的概念:所有更改都是通过客户端JavaScript完成的，包括路由器的JavaScript实现所做的“页面”更改(常见的选择是@angular/router)。

(如推入现有数组)

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

我尝试将子节点推入选定的dataItem this.selectedNode.items.push(newItem)中。

那就有别的不对劲了。尝试将整个数组作为JSON打印到页面上，以查看它是否正在更改：{{ selectedNode.items | json }}。

我将更新答案，并给出一个具体的原因，说明在添加缺少的细节时没有看到视图更改的原因。以上是帮助其他人更好地理解视图可能不更新的原因的一般想法。