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

【问题标题】：Angular 2 - Adding click function to button in table cellAngular 2 - 向表格单元格中的按钮添加点击功能
【发布时间】：2019-01-20 02:33:15
【问题描述】：

我正在尝试将按钮添加到表格中，如上图所示。

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

【问题讨论】：

这与编译代码有关：(click) is not valid JS ；当您构建应用程序时，它被编译为onclick（不是真的，但它反映了您的问题）。如果您想这样做，您必须将您的组件函数绑定到窗口并使用onclick 调用它们。另外，考虑使用ngZone 留在Angular 的上下文中。
@trichetriche 我已将（单击）更改为 onClick，也没有任何反应。还有其他可能导致问题的原因吗？

标签： angular html-table click cell

【解决方案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>

【讨论】：