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

Question

我正在使用 ng prime DataTable 在 html table.

中显示数据

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

这是 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。

如何实现？提前致谢

Answer 1

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

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

Angular 4 - Primeng Datatable - Edit and detail in the same row

angular

primeng-datatable