Primeng p-table排序不是排序数据

Question

我正在创建一些 p-table 并且我尝试添加排序但它不起作用。排序图标可见，图标动画有效，table 中的数据正在呈现，但在 header 单击时未排序。我找到了 Primeng 文档，我认为我做了我应该做的一切。我尝试了一些在互联网上找到的解决方案，但没有任何帮助。

我在 ts 文件中的列：

正在从 API 获取数据作为 objects 的数组（下面的数组示例 - 当然，实际数据数组中有更多数据）：

const products = [
      {
        id: "1",
        node: {
          index: "0",
          name: "Some product name",
          price: 20.4,
          discount: 0,
          grossPrice: 24.8,
          count: 5,
          info: "Some info"
        }

      }
    ]

我的 html 文件：

        <p-table [columns]="cols" [value]="products" sortMode="multiple">
          <ng-template pTemplate="header" let-columns>
            <tr class="ig-table-tr">
              <th *ngFor="let col of columns" [class]="col.class" [pSortableColumn]="col.field" [width]="col.width">
                {{ col.header }}
                <ng-container *ngIf="col.field !== 'info' && col.field !== 'add'">
                  <p-sortIcon [field]="col.field"></p-sortIcon>
                </ng-container>
              </th>
            </tr>
          </ng-template>
          <ng-template pTemplate="body" let-product let-columns="columns">
            <tr class="ig-table-tr">
                <td *ngFor="let col of columns">
                  <ng-container *ngIf="col.field !== 'add'">
                    {{product.node[col.field]}}
                  </ng-container>
                </td>
            </tr>
          </ng-template>
        </p-table>

Answer 1

经过大约一个小时的尝试找到解决方案，我终于找到了。问题在于从对象获取字段。这对我来说有点奇怪但有效。如果产品对象在数组对象的键（此处为节点）内，则它不起作用，所以我已更改它。

下面的示例不起作用：

const products = [
      {
        id: "1",
        node: {
          index: "0",
          name: "Some product name",
          price: 20.4,
          discount: 0,
          grossPrice: 24.8,
          count: 5,
          info: "Some info"
        }
      }
    ]

<ng-container *ngIf="col.field !== 'addCart'">
  {{product.node[col.field]}}
</ng-container>

下面的示例有效：

const products = [
      {
        index: "0",
        name: "Some product name",
        price: 20.4,
        discount: 0,
        grossPrice: 24.8,
        count: 5,
        info: "Some info"
      }
  ]

<ng-container *ngIf="col.field !== 'add'">
  {{product[col.field]}}
</ng-container>

Primeng p-table排序不是排序数据

Primeng p-table sorting is not sorting data

javascript

sorting

html-table

primeng

angular