Angular2需要点击两次来检索JSON并生成HTML

Question

在我的模板中，我有一个按钮来触发以下方法:

getResults() {
        this.resultService.getResultsAsTree(this.disk1.id, this.disk2.id, this.mode)
            .subscribe(
                results => this.json = results,
                error => this.errorMessage = <any>error);
        this.getHTML();
    }

该方法订阅了一个服务，该服务检索JSON对象，并将其保存到this.json属性中。随后，它将调用this.getHTML()函数，该函数应该通过递归方法在树视图中将JSON格式化为HTML:

getHTML() {
        this.html = '';
        this.html += '<div class="jstree"><ul>';
        this.structureAsTree(this.json);
        this.html += '</ul></div>';
    }

    structureAsTree(obj: Object) {
        for (var key in obj) {
            if (!this.isEmpty(obj[key])) { 
                this.html += '<li>' + key + '<ul>';
                this.structureAsTree(obj[key]);
                this.html += '</ul></li>';
            } else {
                this.html += '<li>' + key + '</li>';
            }
        }
    }

不幸的是，我必须单击该按钮两次才能显示呈现的HTML。但是，从控制台中我已经看到，第一次单击检索了JSON对象。

我假设xhr调用是异步的，所以在创建HTML时this.json是空的。

任何提示如何解决这个问题，所以数据显示在第一次点击?

谢谢。

Answer 1

解决方案:

getResults() {
    this.resultService.getResultsAsTree(this.disk1.id, this.disk2.id, this.mode)
        .subscribe(
            results => this.json = results, // what to do with result
            error => this.errorMessage = <any>error), // what to do if you get error
            () => this.getHTML(); // what to do after you get the result
}

从http请求中获取数据后执行() =>后的代码。Http请求是异步操作，这就是为什么你不能在第一次点击当前代码生成HTML的原因- this.getHTML()在你的请求完成之前被调用。