启用默认排序后,PrimeNG TurboTable排序图标不可见

时间:2019-05-24 08:53:10

标签: angular primeng primeng-turbotable

如果在初始加载时看不到PrimeNG的TurboTable排序图标上的默认排序,则在使用时将对列标题进行样式设置,并对数据进行正确排序。当我手动单击标题再次进行排序时,将显示“排序”图标。

screenshot

html:

<p-table [columns]="columns" [value]="users" sortField="name" sortOrder="1">
  <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-user let-columns="columns">
    // body ...
  </ng-template>
</p-table>

组件:

    this.columns = [
      {field: 'name', header: 'Name'},
      {field: 'email', header: 'email'}
    ]

有什么方法可以在默认排序列上显示排序图标吗?

1 个答案:

答案 0 :(得分:1)

如果您这样绑定sortOrder属性...

[sortOrder]="1"

...该值将被视为数字而不是字符串。有时很难知道字符串是否会在PrimeNG代码内被强制转换回数字。

我建议对所有Angular模板属性绑定使用[brackets]。否则,该类型将被视为字符串,这可能会导致错误。

这对于布尔值尤其有问题,因此我始终建议使用以下语法:

[doSomething]="false"

如果实际上需要一个字符串,则可以使用以下语法:

[myProp]="'myString'"