Angular PrimeNG 数据表排序答案

【问题标题】：Angular PrimeNG DataTable sortAngular PrimeNG 数据表排序
【发布时间】：2017-08-21 11:11:08
【问题描述】：

代码链接为：https://plnkr.co/edit/V9ZkLzDeVo15ngIu2Glo?p=preview

我的模板是：

<p-dataTable [value]="cars">
<p-headerColumnGroup>
    <p-row>
        <p-column header="Vin" rowspan="2" [sortable]="true"></p-column>
        <p-column header="Info" colspan="3"></p-column>
    </p-row>
    <p-row>
        <p-column header="Year" [sortable]="true"></p-column>
        <p-column header="Brand" [sortable]="true"></p-column>
        <p-column header="Color" [sortable]="true"></p-column>
    </p-row>
</p-headerColumnGroup>
<p-column field="vin"></p-column>
<p-column field="year"></p-column>
<p-column field="brand"></p-column>
<p-column field="color"></p-column>

当有 colgroup 标头时，排序功能将不起作用。有人可以建议我吗？

【问题讨论】：

标签： angular primeng primeng-datatable

【解决方案1】：

这是因为p-dataTable 找不到标题和列之间的连接。将sortField 添加到标题将有助于建立它们：

<p-headerColumnGroup>
    <p-row>
        <p-column header="Vin" sortField="vin" rowspan="2" [sortable]="true"></p-column>
        <p-column header="Info" colspan="3"></p-column>
    </p-row>
    <p-row>
        <p-column header="Year" sortField="year" [sortable]="true"></p-column>
        <p-column header="Brand" sortField="brand" [sortable]="true"></p-column>
        <p-column header="Color" sortField="color" [sortable]="true"></p-column>
    </p-row>
</p-headerColumnGroup>

【讨论】：