在Angular2中完成ajax请求后加载HtmlTemplate答案

【问题标题】：HtmlTemplate loading after ajax request complete in Angular2在Angular2中完成ajax请求后加载HtmlTemplate
【发布时间】：2018-01-11 10:39:07
【问题描述】：

我目前在 Angular2 中工作，我对 angular2 的某些方面一无所知，所以我的问题是我在那里使用过 jquery 和 html 我曾经使用 HTML 模板加载 html 模板以响应 jquery ajax，然后将模板附加到视图，现在我如何在 Angular2 中实现相同的目标。我的场景是，我有一个 typescript 类，它有一个关联的 html 页面，它处理一个复选框 onChange 事件，并且在该事件的成功响应中，我想将一个 HTML 附加到当前元素。

如何创建动态模板。
如何在我之前创建的 typescript 类中使用处理程序将事件绑定到动态创建的模板。
如何在当前html元素下渲染。

【问题讨论】：

动态模板内容从哪里来？是否要使用复选框在复选框后附加一些内容？

标签： angular angular2-template

【解决方案1】：

在 Jquery 中，您可以使用 javascript 将您想要的任何响应附加到 DOM 上。在 angular2 中，它的工作方式略有不同 - 您的 HTML 本身会响应代码打字稿方面的变化。所以在你的例子中，这看起来像这样：

<html>
<div id='checkboxList'>
<span> Please check here for change </span>
  <input type="checkbox" (click)="toggleCheck($event)" />
<div *ngIf='response'>{{response}}</div>
</div>
</html>

并在您的组件中链接到此 html：

response = null;
 toggleCheck(event)
    {
        this.MyService.getGridData(parameters).subscribe(
            result => {
              this.response = result;
            }
        );
    }

因此，就您的 HTML 中的动态模板而言，这就是 {{}} 的用途 - 它们链接到 typescript 中的变量，并且当它被填充时（当您订阅时）它将显示在 HTML 中。

【讨论】：

我已经尝试过了，但它只将响应显示为对象，但我想要一个新的 HTML 模板，它创建带有检查事件绑定的子复选框。
所有这一切都可以通过正确的绑定来实现。您可以有一个隐藏的复选框，直到您的数据返回，但我不确定您想要做什么。如果您发布您正在发送并希望看到的确切数据，那将很有帮助。