angular - PrimeNg排序
问题描述
我正在使用 primeNg <p-table>
。我想实现数据排序。我所做的是下面
排序.HTML
<p-table [columns]="cols" [value]="documents">
<ng-template pTemplate="header" let-columns>
<tr>
<th *ngFor="let col of columns" [pSortableColumn]="col.field">
{{col.header}}
<p-sortIcon [field]="col.field"></p-sortIcon>
</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-doc>
<tr>
<td>
{{doc.sName}}
</td>
<td>
{{doc.sYear}}
</td>
<td>
{{doc.sAge}}
</td>
<td>
{{doc.sColor}}
</td>
</tr>
</ng-template>
</p-table>
排序.ts
this.cols = [
{ field: 'name', header: 'Name' },
{ field: 'year', header: 'Year' },
{ field: 'age', header: 'Age' },
{ field: 'color', header: 'Color' }
];
ngOnInit(){
//made a service call and got data for
this.documents=[{
"sName":"Jhon",
"sYear":"1994",
"sAge":"20",
"sColor":"Red"
},
{
"sName":"Sam",
"sYear":"1996",
"sAge":"25",
"sColor":"Red"
},
{
"sName":"Anna",
"sYear":"1991",
"sAge":"21",
"sColor":"Green"
},
{
"sName":"Jhon",
"sYear":"1999",
"sAge":"25",
"sColor":"Blue"
},
{
"sName":"Betty",
"sYear":"1993",
"sAge":"35",
"sColor":"Red"
}]
}
到目前为止,只有Name
字段正在排序,如何在其他列中也实现排序?我使用[pSortableColumn]
但列没有得到排序,我错过了某个点。你能指导我哪里错了吗?
PS:我不能用<p-dataTable>
。
解决方案
对于使用 Turbo 表/具有固定列的 p 表进行排序,请尝试以下代码
<p-table #dt [value]="data">
<ng-template pTemplate="header">
<tr>
<th [pSortableColumn]="'Name'">Name
<p-sortIcon [field]="'Name'"></p-sortIcon>
</th>
<th [pSortableColumn]="'Age'">Age
<p-sortIcon [field]="'Age'"></p-sortIcon>
</th>
<th [pSortableColumn]="'Height'">Height
<p-sortIcon [field]="'Height'"></p-sortIcon>
</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-col>
<tr>
<td>{{col.Name}}</td>
<td>{{col.Age}}</td>
<td>{{col.Height}}</td>
</tr>
</ng-template>
</p-table>
推荐阅读
- r - 如何从 R 中的 prop.table 制作折线图?
- node.js - 在 Node JS 中为 WebSocket (ws) 使用自签名 CA 证书
- python - 在 python 中运行 sql select 语句时出现错误
- cookies - 如何在 iOS 中将 Cookie 复制到 WKWebview?
- python - 有什么方法可以在python中将unicode文本格式数据正确转换为csv?
- ios - 关闭应用程序并再次打开然后 PopToRootViewController 不能在 swift firebase 中工作
- excel - VBA在列中选择包含相同ID的行,突出显示行,然后继续下一个ID并将ID复制到剪贴板
- purescript - 结合棱镜以专注于一个值,而不考虑分支
- spring - Docker容器中的Spring Integration FTP:不触发流
- socket.io - 如何在 socket.io 中轻松更改房间?