Angular2 Ligne de tableau cliquable, sauf la dernière cellule

Question

J'ai une table avec des données, et ma dernière cellule est un bouton de suppression pour pouvoir supprimer une ligne. Le problème auquel je suis confronté est que mes lignes sont cliquables qui me mènent à une autre page pour éditer l'élément, et donc quand je clique sur le bouton de suppression, il supprime l'élément mais m'amène également à la page d'édition.

Voici mon code:

<table class="data-table-format"> 
    <thead> 
    <tr> 
     <th>id</th> 
     <th>Maker</th> 
     <th>Model</th> 
     <th>Year</th> 
     <th></th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr *ngFor="let car of pagedItems" (click)="editCar(car)"> 
     <th>{{ car.car_id }}</th> 
     <td>{{ car.car_maker }}</td> 
     <td>{{ car.car_model }}</td> 
     <td>{{ car.car_year }}</td> 
     <td><i class="material-icons" style="color:red" (click)="deleteCar(car.car_id)">delete_forever</i></td> 
    </tr> 
    </tbody> 
</table> 

Toute suggestion sur la façon de le faire avec angulaire/tapuscrit?

Answer 1

Vous pouvez essayer ceci. Ce n'est pas jQuery

<tbody> 
    <tr *ngFor="let car of pagedItems" (click)="editCar(car)"> 
     <th>{{ car.car_id }}</th> 
     <td>{{ car.car_maker }}</td> 
     <td>{{ car.car_model }}</td> 
     <td>{{ car.car_year }}</td> 
     <td><i class="material-icons" style="color:red" (click)="$event.stopPropagation();deleteCar(car.car_id)">delete_forever</i></td> 
    </tr> 
    </tbody>