Как сделать строку таблицы активируемой для ссылки, но в последнем столбце поведение не будет таким же?

Question

Ниже приведен код, с которым я работаю, который демонстрирует, чего я хочу достичь

<tr *ngFor="let plan of list; index as i" class="success" (click)="platDetails(plan)"> 
    <!-- the click event above takes us to the platDetails view-->
    <td>{{plan.name}}
    </td>
    <td>{{plan.test}}
    </td>
    <td> <!-- I want to allow the user to click the dropdown btn without triggering the (click) event above. currently when i try to click this drop down the click event in the tr is triggered and takes me away. -->
        <div class="input-group">
            <button type="button" class="btnTransparent" data-toggle="dropdown" aria-haspopup="true"
                aria-expanded="false">
                <i class="fa fa-ellipsis-h"></i>
                <span class="sr-only">Toggle Dropdown</span>
            </button>
            <div class="dropdown-menu dropdown-menu-right">
                <a class="dropdown-item" (click)="action(plan)">View Plan</a>
            </div>
        </div>
    </td>
</tr>

Как я могу разделить этот tr, чтобы учесть эти два тд или сколько их можно контролировать при клике трсобытие и оставить последний тд самостоятельно?Я надеюсь, что в этом есть смысл.

Answer 1

Вам просто нужно остановить распространение события с помощью нажатия на action (), что-то вроде следующего:

(click)=action(plan, $event)

action(plan, event) {
  event.stopPropagation();
  // do your other action business
}

Answer 2

Переместить platDetails событие клика из строки в столбец и оставить последний столбец

<tr *ngFor="let plan of list; index as i" class="success"> 
<!-- the click event above takes us to the platDetails view-->
<td (click)="platDetails(plan)">{{plan.name}}
</td>
<td (click)="platDetails(plan)">{{plan.test}}
</td>
<td> <!-- I want to allow the user to click the dropdown btn without triggering the (click) event above. currently when i try to click this drop down the click event in the tr is triggered and takes me away. -->
    <div class="input-group">
        <button type="button" class="btnTransparent" data-toggle="dropdown" aria-haspopup="true"
            aria-expanded="false">
            <i class="fa fa-ellipsis-h"></i>
            <span class="sr-only">Toggle Dropdown</span>
        </button>
        <div class="dropdown-menu dropdown-menu-right">
            <a class="dropdown-item" (click)="action(plan)">View Plan</a>
        </div>
    </div>
</td>

Answer 3

Возможно, вы можете просто предотвратить распространение события:

Сначала передайте событие вашей функции:

<a class="dropdown-item" (click)="action(plan, $event)">View Plan</a>

Затем в вашей функции:

public function action(plan: Plan, event: any){
    event.stopImmediatePropagation();
    event.stopPropagation();
    event.preventDefault();

    ...
}