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>用光標動畫

Answer 2

設定爲<tr>填充到0這樣的<td>元件將填補行，因此使整個電池點擊。
請注意，根據您的css文件，這可能會有點困難。但解決方案基本上是讓你的數據覆蓋你的行。