树加载后如何扩展节点？

Question

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

jobs

在上面的代码中，树被加载后，我试图扩展树。这引发错误，无法读取未定义的属性treemodel。因此，我在网页上放置了一个按钮，并尝试在按钮单击时调用功能。当用户单击下面的expandall按钮时，将调用fucntion。

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

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

Answer 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)方法负责使用服务调用返回的数据来创建树。如果是这种情况，这还意味着在执行该方法之前，树可能不可用-您是否有机会在this.treecreate方法中设置getRulebyUserRoleIdSuccess变量？。

正如我们之前所说，不能保证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承诺/可观察的处理方式。如果是后来者，我建议您尝试在一些在线课程/教程中快速看一看：诺言背后的概念并不是很难理解，但是如果不完全理解，很容易造成很多混乱。