Nativescript 如何在像 document.write() 这样的打字稿中编写 HTML

Question

basically I want to generate a specific number of labels at different row/col positions based on user input but I cannot find anywhere that tells how to write to the .component.html document from the .component.ts document. I basically want to use something like document.write() but for nativescript.

Answer 1

Use interpolation (denoted by {{...}} ) to insert data from component in template:

Component:

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;
    }
  }
}

Template (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)">

Working example: Stackblitz