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()。

Angular2需要单击两次以检索JSON并生成HTML

1 个答案: