单击按钮时获取行中的第 n 个单元格答案

【问题标题】：Getting nth cell in row on button click单击按钮时获取行中的第 n 个单元格
【发布时间】：2017-04-16 17:38:48
【问题描述】：

我试图弄清楚如何获取与在 angular2 中单击的按钮在同一行中的第 n 个单元格的值。到目前为止只知道我必须传递 $event 值但不确定如何提取相关数据。

在 app.component.html 中

<table>
      <thead>
        <tr>
          <th>Name</th>
          <th>Identifier</th>
          <th>Check Identifier</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td hidden>1</td>
          <td>Test</td>
          <td><button (click)="getData($event)">Display</button></td>
          <td>View</td>
        </tr>        
      </tbody>
    </table>

在 app.component.ts 我有以下功能设置

getData(event: any) {
console.info(event);

// this bit not sure how to do
}

在上述场景中，如何在单击“显示”按钮后从行中的第一个单元格中提取值 1？

【问题讨论】：

您为什么要这样做？通常数据来自某个模型，通常最好访问模型而不是从 DOM 中读取。
当您查看console.info(event); 的输出时，它是否包含您所期望的内容？如果需要，您可以随时将值传递给函数。
@GünterZöchbauer 我可能会走模型的道路（仍然需要弄清楚那个位），同时我正在尝试找出这种方法。
@R.Richards 不，尝试了该路径，因此是 console.info
你是如何生成n个元素的？您是手动添加它们还是使用*ngFor 或类似方法从数据中生成它们？

标签： angular typescript

【解决方案1】：

  <tbody>
    <tr>
      <td hidden #nth>1</td>
      <td>Test</td>
      <td><button (click)="getData($event, nth)">Display</button></td>
      <td>View</td>
    </tr>        
  </tbody>

getData(event: any, el HTMLElement) {
  console.info(event);
  console.log(el.innerHTML);    
}

【讨论】：