javascript - 动态表 Javascript - Angular 2

Question

我正在尝试通过 HTML 访问表格中的一些信息并且它正在工作，但我想在单击按钮而不是 onInit 后执行此操作，所以我想我需要通过 Javascript 或 Typescript

来完成

用 HTML 创建表格，但在单击按钮后用 Javascript 或 Typescript 填充它会是完美的。

表格如下: HTML

<table id="myTableSystems" class="table table-bordred table-striped">
    <thead>
      <th>{{ 'Checkbox' | translate }}</th>
      <th>{{ 'MappingMult' | translate }}</th>
    </thead>
    <tbody>
      <tr *ngFor="let receiver of testCase.receivers;" class="pointer">
        <td>
          <input type="checkbox">
        </td>
        <td>{{receiver.mappingMult}}</td>
      </tr>
    </tbody>
</table>

Answer 1

在您的 component.ts 文件中，您需要创建一个函数来填充对象“testCase”。

我不确定组件如何获取/接收“testCase”的数据。您将需要重构逻辑，以便在 fillData 函数中获取“testCase”的数据。

组件.ts

  public fillData(): void {
    this.testCase.receivers = [{mappingMult: 'data'}];
  }

组件.html

<button type="button" (click)="fillData()" class="">Click To Fill Data</button>

<table *ngIf="testCase" id="myTableSystems" class="table table-bordred table-striped">
  <thead>
    <th>{{ 'Checkbox' | translate }}</th>
    <th>{{ 'MappingMult' | translate }}</th>
  </thead>
  <tbody>
    <tr *ngFor="let receiver of testCase.receivers;" class="pointer">
      <td>
        <input type="checkbox">
      </td>
      <td>{{receiver.mappingMult}}</td>
    </tr>
  </tbody>