конфликт щелчка по строке таблицы

Question

У меня есть таблица, которая включает в себя щелчок по строке, которая приводит меня к деталям этого элемента таблицы, и в каждой строке есть значок удаления. когда я нажимаю на удаление, я получаю конфлит. пожалуйста, помогите мне решить эту проблему?

мой менеджер хочет, чтобы щелчок по строке был по всей строке

вот мой код:

<div class="table-responsive datatable spacing-table">
   <table class="table table-striped myt-user-table" [mfData]="myObjects" 
 #mf="mfDataTable" [mfRowsOnPage]="10">

       <thead class="myt-table-header" align="float-left">
           <th *ngFor='let col of colNames'>{{col}}</th>
           <th *ngIf="isActions"></th>
    </thead>
    <tbody>

        <tr *ngFor='let obj of mf.data' (click)='editObjectEmmitter(obj)'>

            <td *ngFor='let field of myFields' [innerHTML]="obj[field] | applyPure: pipeFn"
                (click)='viewRowEmmitter(obj)' [width]="1/colNames.length*90+'%'" align="float-left"></td>
            <td class="actions" *ngIf="isView || isUpdated || isDeleted || isDesactivated || isActions"
                align="right" width="10%">
                <a *ngIf="isDeleted" (click)='deleteObjectEmmitter(obj)'>
                    <i class="icon-rubbish-bin text-danger" data-toggle="popover" title="Supprimer"></i>
                </a>
                <a *ngIf="isDesactivated" (click)='desactivateObjectEmmitter(obj)'>
                    <i class="fa fa-plane text-muted" data-toggle="popover" title="Activer/Désactiver"></i>
                </a>
            </td>
        </tr>
    </tbody>
    <tfoot class="tfoot">
        <mfBootstrapPaginator class="pagination"></mfBootstrapPaginator>
    </tfoot>
</table>

что ожидается: * когда вы нажимаете, где вы хотите в строке, вы переходите к деталям * когда вы нажимаете на удаление, вы получаете всплывающее окно подтверждения удаления

Answer 1

Добавить stopPropagation к событию, вызванному щелчком ( документ stopPropagation )

Подобная вещь:

<a *ngIf="isDeleted" (click)='deleteObjectEmmitter(obj); $event.stopPropagation()'>
  <i class="icon-rubbish-bin text-danger" data-toggle="popover" title="Supprimer"></i>
</a>

Вы можете перемещать логику распространенияв вашем компоненте, но это означает, что ваш deleteObjectEmitter должен принять другой параметр