javascript - Angular2 Klickbar tabellrad, förutom sista cellen

Jag har en tabell med data, och min sista cell är en raderingsknapp för att kunna ta bort en rad.

Problemet jag står inför är att mina rader är klickbara, vilket tar mig till en annan sida för att redigera elementet, och när jag klickar på raderingsknappen raderas elementet men jag tas också till redigeringssidan.

Här är min kod:

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

Några förslag på hur man gör det med Angular/TypeScript?

Svar #1

Du kan prova detta. Detta är inte 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>

Relaterade artiklar