Angular 2 - PrimeNG - dataTable 一次展开一行

Question

在 PrimeNG 中 - 有什么方法可以一次只扩展一行？

<p-dataTable [value]="cars" expandableRows="true">
        <p-column expander="true" styleClass="col-icon"></p-column>
         <p-column field="vin" header="Vin"></p-column>
        <ng-template let-car pTemplate="rowexpansion">
         ...
</p-dataTable>

Answer 1

I can give you clue how to solve it and hope it will work for you.

It is not the actual solution for this issue but you will get Idea how to 
solve this. Also I am using javascript in the code. You can convert it into 
angular way.

<p-dataTable expandableRows="true"
   (onRowExpand) = "onRowExpand($event)">

onRowExpand(data : any) {
        var d = document.getElementsByClassName('fa fa-fw ui-c ui-row-toggler fa-chevron-circle-down');
        if (d.length > 0) {
            for (var i = 0; i < d.length; i++) {
                this.renderer.setElementStyle(d[i].parentElement.parentElement.parentElement.nextElementSibling,'display','none')
            }
        }
}

What i am doing here is fetching the class which is having 
fa-chevron-circle-down'. Then taking parent element recursively till the 
<tr>. Then take the next sibling element and you can delete it or you can do 
display none dynamically.

Answer 2

当我将 PrimeNG Grid 升级到 TurboTable 版本时问题解决了.. 这是自 PrimeNG 5 以来的新功能。而不是使用

Answer 3

下面就试试用<p-dataTable [value]="cars" rowExpandMode="single" expandableRows="true">

添加 rowExpandMode="single" 一次打开一行。

Answer 4

PrimeNG 7.1.1：将 rowExpandMode 属性设置为 'single' 即可。

<p-table #dt [columns]="cols" [value]="tableData" [rows]="pageOptions.perPage" [totalRecords]="totalRecords"[rowsPerPageOptions]="rowsPerPageOptions" [responsive]="true" rowExpandMode="single">

Angular 2 - PrimeNG - dataTable 一次展开一行

Angular 2 - PrimeNG - dataTable Expand one row at a time

grid

expandablelistview

primeng

angular