Nativescript 如何在 typescript 中编写 HTML，例如 document.write()

【问题标题】：Nativescript how to write HTML in typescript like document.write()Nativescript 如何在 typescript 中编写 HTML，例如 document.write()
【发布时间】：2020-02-16 02:03:55
【问题描述】：

基本上我想根据用户输入在不同的行/列位置生成特定数量的标签，但我找不到任何地方告诉如何从 .component.ts 文档写入 .component.html 文档。我基本上想使用 document.write() 之类的东西，但用于 nativescript。

【问题讨论】：

这在浏览器中甚至都不是正确的方法
你能补充一些细节吗，比如你想写什么，在哪里，是在某个事件上……
NativeScript 不是浏览器，它不支持 DOM 或依赖于浏览器的 JS API。您将使用编程方式创建和注入视图，但由于 Angular 支持动态模板，您可以利用这一点。

标签： javascript angular typescript nativescript

【解决方案1】：

使用interpolation（表示为{{...}}）在模板中插入来自组件的数据：

组件：

export class AppComponent  {
  name = 'Angular';

  labels = [
    {
      id: '1',
      name: '',
    },
    {
      id: '2',
      name: '',
    },
    {
      id: '3',
      name: '',
    },
  ];

  public onKey(event: any) {
    for (const label of this.labels) {
      label.name = event.target.value;
    }
  }
}

模板（HTML）：

<div class="divTable">
  <div class="divTableBody">
    <ng-container *ngFor="let label of labels">
      <div class="divTableRow">
        <div class="divTableCell">{{ label.id }}</div>
        <div class="divTableCell">{{ label.name }}</div>
      </div>
    </ng-container>
  </div>
</div>

<p>Type here:</p>
<input (keyup)="onKey($event)">

工作示例：Stackblitz

【讨论】：