Angular 2 Gesamte Zeile anklickbar machen

Question

Ich möchte jede Zeile einer Tabelle in Angular 2 anklickbar machen. Allerdings sind nur die Teile der Zelle anklickbar, die Daten enthalten. Wenn eine Zelle mehr Daten als eine andere enthält und somit eine größere Höhe aufweist, ist das leere Bit der kleineren Zelle nicht anklickbar.

Zum Beispiel auf der Seite unterhalb der ersten Zelle ist nur dann ein Link auf der Linie den Namen enthält, während die Gesamtheit der zweiten Zelle anklickbar ist

<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

ich den routerLink Code für Sie festgelegt haben.

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

Sie müssen CSS für die Animation hinzufügen.

clickable { 
    cursor: pointer; 
} 

Dies wird die gesamte <tr></tr> klickbare mit dem Cursor Animation machen

Answer 2

die Polsterung für die <tr> auf 0 auf diese Weise setzen die <td> Elemente die Reihen füllen würde, damit die ganze Zelle klickbare machen.
Beachten Sie, dass dies je nach CSS-Datei ein bisschen schwieriger sein könnte. Die Lösung besteht jedoch im Wesentlichen darin, dass Ihre Daten Ihre Zeilen abdecken.