如何在加载树后展开节点？

Question

嗨，我正在开发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();
    }

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

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

这段代码可以工作，我的树就会展开。有人能帮我解决这个问题吗？任何帮助都将不胜感激。谢谢

Answer 1

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

这有一个小“问题”。查看您的代码，getRulesbyUserRoleId(...)调用是一个异步调用，它返回一个可观察对象。

我自作主张地重新格式化了您的代码，以便问题更加明显。

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

    this.treecreate.treeModel.expandAll();
}

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

不知何故，called

• roleservice.getRulesbyUserRoleId(row.userroleid)会调用
• addrule(row, ruleValue)，并将两个处理程序附加到刚刚创建的可观察对象上。它们将在稍后的时间被执行，当可观察对象准备发出一些值(..或者一些error).
• this.treecreate.treeModel.expandAll() 被称为

..。

..。

...

• 在某个未知的时间，将调用可观察对象上的两个订阅处理程序之一.

那么，这意味着什么呢？同样，我假设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 Promises /可观察到的处理。如果是后者，我建议您尝试快速查看一些在线课程/教程: promises背后的概念并不是很难掌握，但如果没有完全掌握，很容易造成很多混乱。