Question

我正在尝试将按钮添加到表格中，如上面的屏幕截图。

这是我的HTML：

<div>
    <article class="content">
      <section>
        <div class="table-responsive">
          <table class="table highlight">
            <tr>
              <th *ngFor="let head of heads">{{head}}</th>
            </tr>
            <tr *ngFor="let body of bodys">
              <td *ngFor="let p of body" [innerHTML]="p"></td>
            </tr>
          </table>
        </div>
      </section>
    </article>
  </div>

这是我的.ts：

for (var i in this.products){

    var wp = this.products[i]; 
    var temp = [];
    temp.push("x");
    temp.push("x");
    temp.push("x");
    temp.push('<a class="tbl-btn btn-primary (click)="termsheetClicked()">View Termsheet</a>');
    temp.push('<a class="tbl-btn btn-primary">View Product Offering</a>');

    this.bodys.push(temp);
  }

但是，termsheetClicked（）从未调用过。

Answer 1

我找到了另一种选择。我没有通过.ts添加按钮，而是通过HTML添加了按钮，如下所示：

<div>
    <article class="content">
      <section>
        <div class="table-responsive">
          <table class="table highlight">
            <tr>
              <th *ngFor="let wpHead of wpHeads">{{wpHead}}</th>
            </tr>
            <tr *ngFor="let wpBody of wpBodys">
              <td>{{wpBody[0]}}</td>
              <td>{{wpBody[1]}}</td>
              <td>{{wpBody[2]}}</td>
              <td><button class="tbl-btn btn-primary" (click)="termsheetClicked(wpBody[3])">View Termsheet</button></td>
              <td><button class="tbl-btn btn-primary" (click)="termsheetClicked(wpBody[4])">View Product Offering</button></td>
            </tr>
          </table>
        </div>
      </section>
    </article>
  </div>

Angular 2-将单击功能添加到表格单元格中的按钮

1 个答案: