Как расширить узлы после загрузки дерева? - PullRequest
Новая
       7

Как расширить узлы после загрузки дерева?

0 голосов
/ 01 октября 2018

Привет, я разрабатываю веб-приложение на Angular 5. Я загружаю деревья на своей веб-странице.Я использую данные из API, чтобы связать их с узлами дерева.Это дерево динамично.Как только дерево загрузится, я хочу его расширить.

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

В приведенном выше коде после загрузки дерева я пытаюсь развернуть дерево.Это ошибка выдачи не может прочитать свойство treemodel из неопределенного.Поэтому я поместил одну кнопку на свою веб-страницу и попытался вызвать функцию нажатием кнопки.Когда пользователь нажимает кнопку расширения, расположенную ниже, будет вызвана функция. 

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

Этот код работает, и мое дерево расширяется.Может ли кто-нибудь помочь мне разобраться в проблеме?Любая помощь будет оценена.Спасибо

1 Ответ

0 голосов
/ 01 октября 2018

Вы сказали, что « используете данные из 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 / Observable.Если позже, я предлагаю вам попытаться быстро просмотреть некоторые онлайн-курсы / учебные пособия: концепции, лежащие в основе обещаний, на самом деле не очень сложны для понимания, но могут легко создать большую путаницу, если не будут полностью поняты.

...