Question

我想让表格的每一行都可以在Angular 2中点击。但是，只有包含数据的单元格部分才是可点击的。即如果一个单元格包含的数据多于另一个单元格，因此具有更高的高度，则较小单元格的空位不可单击。

例如，在下面的页面中，第一个单元格只能在包含名称的行上单击，而第二个单元格的整体可单击

<table>
    <thead></thead>
    <tbody>
        <tr *ngFor="let item of items" routerLink="/otherpage/{{item.Id}}">
           <td>{{item.name}}</td>
           <td>
              <ul>
                 <li *ngFor="let detail of item.details">
                    {{detail}}
                 </li>
              </ul>
           </td>
        </tr>
    </tbody>
</table>

Answer 1

我已为您修复了routerLink代码。

<table>
  <thead></thead>
  <tbody>
      <tr class="clickable" *ngFor="let item of items" [routerLink]="['/otherpage/', item.Id]">
         <td>{{item.name}}</td>
         <td>
            <ul>
               <li *ngFor="let detail of item.details">
                  {{detail}}
               </li>
            </ul>
         </td>
      </tr>
  </tbody>
</table>

您需要为动画添加CSS。

clickable {
  cursor: pointer;
}

这将使整个<tr></tr>可以使用光标动画

进行点击

Answer 2

将<tr>的填充设置为0.这样<td>元素将填充行，从而使整个单元格可单击。
请注意，根据您的css文件，这可能会有点困难。但解决方案基本上是让您的数据覆盖您的行。

Angular 2使整行可以点击

2 个答案: