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

Question

在 PrimeNG 的 TurboTable 排序图标上启用默认排序时，初始加载时不可见，列 header 的样式与使用时的一样，并且数据已正确排序。当我手动点击 header 再次排序时出现排序图标。

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'}
    ]

有没有办法在默认排序列上显示排序图标？

Answer 1

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

[sortOrder]="1"

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

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

这对于布尔值尤其有问题，所以我总是推荐这种语法：

[doSomething]="false"

如果确实需要一个字符串，这个语法就可以了：

[myProp]="'myString'"

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

PrimeNG TurboTable sort icon not visible with default sorting enabled

primeng

angular

primeng-turbotable