加载树后如何扩展节点？答案

【问题标题】：How to expand nodes once tree is loaded?加载树后如何扩展节点？
【发布时间】：2018-10-01 08:05:42
【问题描述】：

您好，我正在使用 Angular 5 开发 Web 应用程序。我正在我的网页中加载树。我正在使用 API 中的数据将其绑定到树节点。这棵树是动态的。加载树后，我想扩展它。

addrule(row, ruleValue) {
        this.roleservice.getRulesbyUserRoleId(row.userroleid).subscribe(result => this.getRulebyUserRoleIdSuccess(result,row), error => this.getRulebyUserRoleIdError(error));
        this.treecreate.treeModel.expandAll();
    }

在上面的代码中，加载树后，我试图展开树。这是抛出错误无法读取未定义的属性树模型。所以我在我的网页上放了一个按钮，并尝试在按钮单击时调用函数。当用户点击下面的 expandall 按钮时，函数会被调用。

expnadall(){
      this.treecreate.treeModel.expandAll();
}

这段代码有效，我的树扩展了。有人可以帮我解决这个问题吗？任何帮助，将不胜感激。谢谢

【问题讨论】：

您是否尝试在ngAfterViewInit 中调用expandall。你能展示一个最小的工作示例吗？你在哪里加载树？
我还想试试。我已经创建了 stackbliz 但我无法让它工作stackblitz.com/edit/…
我尝试了 ngAfterViewInit 并且它工作正常
我认为在示例中缺少组件“tree-root”？

标签： angular typescript settimeout

【解决方案1】：

您说您“使用 API 中的数据将其绑定到树节点”。出于这个原因，我假设用于构建树的数据实际上是由this.roleservice.getRulesbyUserRoleId(row.userroleid) 调用获取的。在执行调用的指令之后，您尝试使用expandAll() 方法展开树中的所有节点。

这有点“问题”。查看您的代码，getRulesbyUserRoleId(...) 调用是一个返回 Observable 的异步调用。

我冒昧地重新格式化了您的代码，以便问题更加明显。

addrule(row, ruleValue) {
    this.roleservice.getRulesbyUserRoleId(row.userroleid)
        .subscribe(
            result => this.getRulebyUserRoleIdSuccess(result,row), 
            error => this.getRulebyUserRoleIdError(error)
        );

    this.treecreate.treeModel.expandAll();
}

让我们看看现在会发生什么：

不知何故 addrule(row, ruleValue) 被调用
roleservice.getRulesbyUserRoleId(row.userroleid) 被调用，两个处理程序被附加到刚刚创建的 Observable。当 Observable 准备好发出一些值（.. 或一些错误）时，它们将在稍后执行。
this.treecreate.treeModel.expandAll() 被调用
...
...
...
在某个未知时间，调用 Observable 上两个订阅的处理程序之一。

那么，这是什么意思？同样，我假设 this.getRulebyUserRoleIdSuccess(result,row) 方法负责创建树 - 使用服务调用返回的数据。如果是这种情况，这也意味着在执行所述方法之前，树可能不可用 - 您是否有机会在 getRulebyUserRoleIdSuccess 方法中设置 this.treecreate 变量？？。

正如我们之前所说，不能保证 this.getRulebyUserRoleIdSuccess(result,row) 调用将在 this.treecreate.treeModel.expandAll() 之前执行（实际上恰恰相反），因此不能保证您不会尝试扩展首先创建它之前的树。
这也与您遇到的其他行为一致：在树上调用相同 expandAll() 方法的按钮可以正常工作 - 因为当您按下按钮时，树已经建成 .

如果是这种情况，并且我能够从您的问题中的快速摘要中推断出全貌，那么解决问题应该非常简单：只需移动 expandAll() 调用，以便在创建树后执行它.这样的事情可能会奏效：

addrule(row, ruleValue) {
    this.roleservice.getRulesbyUserRoleId(row.userroleid)
        .subscribe(
            result => {
                this.getRulebyUserRoleIdSuccess(result,row);
                this.treecreate.treeModel.expandAll();
            },
            error => this.getRulebyUserRoleIdError(error)
        );
}

作为最后的警告：再次假设这确实是您面临的问题，目前尚不清楚这是否仅仅是拼写错误或复制/粘贴错误的结果（或者您可能正在处理其他代码）或如果您还不太习惯 javascript Promises / Observable 处理。如果是后者，我建议你尝试快速观看一些在线课程/教程：promise 背后的概念并不是很难掌握，但如果没有完全掌握，很容易造成很多混乱。

【讨论】：