Angular 4 - Primeng 数据表 - 在同一行中编辑和详细信息答案

【问题标题】：Angular 4 - Primeng Datatable - Edit and detail in the same rowAngular 4 - Primeng 数据表 - 在同一行中编辑和详细信息
【发布时间】：2017-12-19 23:25:13
【问题描述】：

我正在使用 ng prime DataTable 在 html 表格中显示数据。

在我的 DataTable 的同一行中，我可以编辑行并在模态窗口中查看详细信息。

这是html代码：

<p-dataTable (onRowSelect)="onRowSelect($event)" [value]="registers" selectionMode="single" [(selection)]="selectedRegister">
    <p-column>
        <ng-template pTemplate="body">
            <a (click)="editRegister(register)"><i class="fa fa-pencil" aria-hidden="true"></i></a>
        </ng-template>
    </p-column>
    <p-column field="name" header="Name" [sortable]="true"></p-column>
</p-dataTable>

问题是，当我点击整行时，函数onRowSelect 被执行，但是当我点击图标“fa-pencil”时，两个函数
editRegister 和 onRowSelect 已执行，但我只想在单击编辑（铅笔图标）按钮时执行 editRegister。

如何做到这一点？提前谢谢

【问题讨论】：

我有一个临时解决方案，暂时隐藏了我去editRegister函数时不需要的模态

标签： angular primeng-datatable

【解决方案1】：

如果您仍然需要更好的解决方案，您可以尝试在您的 editRegister 函数中添加 event.stopPropagation （当然不要忘记在参数中传递事件）

【讨论】：