【发布时间】：2018-12-18 03:43:49
【问题描述】：
PrimeNG 表可以按列排序。 https://www.primefaces.org/primeng/#/table/sort
它们也可以有列组。 https://www.primefaces.org/primeng/#/table/colgroup
很遗憾，我无法让这两个功能协同工作。前者的示例代码通过动态列生成简化了创建过程，但后者的示例代码需要手动编码每一列。
我有一种编写代码的方法，在我看来它应该可以工作，并且它可以毫无错误地构建和显示；但是单击排序图标时它不会对数据进行排序。
这是我的代码（去掉了识别变量名）：
<div *ngIf="(sourceObservableReturningAnArray$ | async) as arrayOfDataNeeded">
<p-table
[value]="arrayOfDataNeeded"
autoLayout="true"
sortField="firstSortedProperty"
[rows]="25">
<ng-template pTemplate="header" let-columns>
<tr>
<th rowspan="2" [pSortableColumn]="arrayOfDataNeeded.firstSortedProperty">
Header for First Property
<p-sortIcon [field]="arrayOfDataNeeded.firstSortedProperty"></p-sortIcon>
</th>
<th rowspan="2" [pSortableColumn]="arrayOfDataNeeded.secondSortedProperty">
Header for Second Property
<p-sortIcon [field]="arrayOfDataNeeded.secondSortedProperty"></p-sortIcon>
</th>
<th rowspan="2" [pSortableColumn]="arrayOfDataNeeded.thirdSortedProperty">
Header for Third Property
<p-sortIcon [field]="arrayOfDataNeeded.thirdSortedProperty"></p-sortIcon>
</th>
<th rowspan="2" [pSortableColumn]="arrayOfDataNeeded.fourthSortedProperty">
Header for Fourth Property
<p-sortIcon [field]="arrayOfDataNeeded.fourthSortedProperty"></p-sortIcon>
</th>
<th rowspan="2" [pSortableColumn]="arrayOfDataNeeded.fifthSortedProperty">
Header for Fifth Property
<p-sortIcon [field]="arrayOfDataNeeded.fifthSortedProperty"></p-sortIcon>
</th>
<th [pSortableColumn]="arrayOfDataNeeded.sixthSortedProperty" colspan="2">
Header with Subheadings
<p-sortIcon [field]="arrayOfDataNeeded.sixthSortedProperty"></p-sortIcon>
</th>
<th rowspan="2" [pSortableColumn]="arrayOfDataNeeded.seventhSortedProperty">
Header for Seventh Property
<p-sortIcon [field]="arrayOfDataNeeded.seventhSortedProperty"></p-sortIcon>
</th>
</tr>
<tr>
<th>Subheading 1</th>
<th>Subheading 2</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-data>
<tr>
<td>{{data.firstSortedProperty | currency}}</td>
<td>{{data.secondSortedProperty}}</td>
<td>{{data.thirdSortedProperty | date : 'shortTime'}}<br>{{data.thirdProperty | date : 'MM/dd/yyyy'}}</td>
<td>{{data.fourthSortedProperty}}%</td>
<td>{{data.fifthSortedProperty}}%</td>
<td>{{data.sixthSortedProperty}}%</td>
<td>{{data.additionalUnsortedProperty | currency}}</td>
<td>{{data.seventhSortedProperty}}</td>
</tr>
</ng-template>
</p-table>
</div>
我猜测问题出在排序字段的规范中：因为 arrayOfDataNeeded 是一个对象数组，但它是具有我想要排序的属性的对象，也许我没有识别对象的以正确的方式处理相关财产。我对 PrimeNG 不够熟悉，不知道我应该怎么做。有可能我可以通过使用隐式上下文来解决它，但我不确定是什么。
开始标记中的 sortField="firstSortedProperty" 完全符合预期，因此数据源似乎没有问题。
如果您看到我的错误，请指出！如果我在问题描述中遗漏了任何内容，我很乐意回答澄清问题。我也愿意接受有关实现所需功能的替代方法的建议。
【问题讨论】：
-
您是否检查过在排序后打开组？对于如何对分组的行/列进行排序，经常会感到困惑。有些人希望对整个组进行排序，而有些则只对组内的值进行排序！
-
@alokstar - 感谢您的建议。我试过在没有列组的情况下设置它，但它仍然无法排序。所以我认为这不是问题的根源。尽管如此，列组仍然是相关的，因为它似乎要求我不动态生成列。它也与任何替代实现有关。还是我误解了你的建议？
-
我发现了几个变通方法，其中一个有轻微的代码气味（但很容易），另一个工作干净（但需要一些额外的工作来重新设计方法）。如果没有其他答案，我会在几天后回答我自己的问题。
标签： angular html-table primeng