单击表行时发生冲突

时间:2019-06-06 13:04:46

标签: html typescript angular6

我有一个表,其中包括一个单击行,该行将我带到该表元素的详细信息,并且在每一行中都有一个删除图标。当我单击删除时,我会感到困惑。请帮我解决这个问题吗?

我的经理希望在该行上单击全部

这是我的代码:

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

预期是:  *当您在行上的任何位置单击时,转到详细信息  *单击删除时,会弹出删除确认消息

1 个答案:

答案 0 :(得分:1)

在点击(stopPropagation's doc)触发的事件上添加stopPropagation

这样的事情:

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

您可以移动组件中的传播逻辑,但这意味着deleteObjectEmitter应该接受另一个参数