angular - Angular 2 - 向表格单元格中的按钮添加点击功能

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() 从未调用过。

标签： angularhtml-tableclickcell

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>