html - Angular 2使整行可点击

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>可点击光标动画