如何通过单击angular4中的单元格来获取表格单元格的列名和行名？答案

【问题标题】：How to get the column name and row name of a tablecell by clicking on the cell in angular4?如何通过单击angular4中的单元格来获取表格单元格的列名和行名？
【发布时间】：2018-03-13 00:50:31
【问题描述】：

我想控制台记录我单击的单元格的列名和行名。我创建了下表，其中单击事件适用于“timesroom”，但不适用于给出未定义响应的“工作日”。

<table class="table table-bordered">
        <thead>
          <tr>
            <th *ngFor="let weekday of weekdays">
                <div>{{weekday}}</div>
            </th>
          </tr>
        </thead>
        <tbody>
          <tr scope="row" *ngFor="let time of times"><td>{{time}}</td>
            <th scope="row"></th> 
            <td (click) = "onClick(weekday, time)"></td>
            <td (click) = "onClick(weekday, time)"></td>
            <td (click) = "onClick(weekday, time)"></td>
            <td (click) = "onClick(weekday, time)"></td>
            <td (click) = "onClick(weekday, time)"></td>
          </tr>
         </tbody>
</table>

我相信我面临的问题是“工作日”超出了范围。我的问题是我应该如何修改我的代码以便能够在单击单元格时同时打印“工作日”和“时间”？

【问题讨论】：

因为你没有 for inside，你可以使用 onClick(0,time), onClick(1,time)...

标签： angular html-table

【解决方案1】：

您需要使用*ngFor 重复您的td 并将weekday 传递给onClick 处理程序

<thead>
  <tr>
    <th>Time</th>
    <th *ngFor="let weekday of weekdays">
      <div>{{weekday}}</div>
    </th>
  </tr>
</thead>
....
<tr *ngFor="let time of times">
    <td>{{time}}</td>
    <td *ngFor="let weekday of weekdays" (click) = "onClick(weekday, time)"></td>
 </tr>
....

【讨论】：

我改变了，结果是第 3 列正确，所以当我点击星期三单元格时，它会打印星期一。
因为您有两个手动列：{{time}}
检查我的答案中的编辑。在第一列中您需要显示时间，对吗？

【解决方案2】：

对我有用的代码如下：

<table class="table table-bordered">
        <thead>
          <tr>
            <th *ngFor="let weekday of weekdays">
                <div>{{weekday}}</div>
            </th>
          </tr>
        </thead>
        <tbody>
          <tr scope="row" *ngFor="let time of times"><td>{{time}}</td>
            <th scope="row" *ngFor="let weekday of weekdaysForClick" (click) = "onClick(weekday, time)"></th> 
          </tr>
         </tbody>
</table>

我区分了两个数组：列名称的工作日是以下（#、星期一、星期四、星期三...）和 weekdaysForClick（星期一、星期四、星期三...）。

【讨论】：