Question

我想控制记录列表名称和我单击的单元格的行名称。我创建了下表，其中click事件适用于'timesroom'，但不适用于'weekday'，它提供了未定义的响应。

<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>

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

Answer 1

您需要使用td重复*ngFor并将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>
....

Answer 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>

我区分两个数组：colum名称的工作日是以下（＃，Monday，Thusday，Wednesday ...）和weekdaysForClick（Monday，Thusday，Wednesday ......）。

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

2 个答案: