Блог

Главная - Вопросы по программированию - Как установить порядок сортировки таблицы primeng по умолчанию в зависимости от наблюдаемого значения

Как установить порядок сортировки таблицы primeng по умолчанию в зависимости от наблюдаемого значения

#angular #primeng #primeng-datatable

#angular #primeng #primeng-datatable

Вопрос:

У меня есть p-table с сортируемыми столбцами. Однако изначально я хочу, чтобы таблица была отсортирована по определенному столбцу, который я использую sortFiled для этого. Но этот столбец неизвестен до времени выполнения. Вот фрагмент таблицы:

 <p-table [value]="offers" sortField="totalPrice">
    <ng-template pTemplate="header">
       <tr>
          <th pSortableColumn="shopName">Name
              <p-sortIcon field="shopName"></p-sortIcon>
          </th>
          <th pSortableColumn="unitPrice">Unit price
              <p-sortIcon field="unitPrice"></p-sortIcon>
          </th>
          <th pSortableColumn="totalPrice">Total price
              <p-sortIcon field="totalPrice"></p-sortIcon>
          </th>
       </tr>
   </ng-template>
   <ng-template pTemplate="body"> .... </ng-template>
</p-table>

Мне нужно указать столбец в зависимости от значения наблюдаемого, что-то вроде следующего, но это, похоже, не работает.

  <p-table [value]="offers" sortField="(isRelventPrice$ | async)? totalPrice : unitPrice">

Любая помощь будет оценена, спасибо.

Комментарии:

1. Для SortField требуется строка, и похоже, что вы передаете переменные. Будет ли это работать, если вы сделаете TotalPrice и UnitPrice в виде строк? <p-table [value]="offers" sortField="(isRelventPrice$ | async)? 'totalPrice' : 'unitPrice'">

2. это решит вашу проблему [sortField]="(isRelventPrice$ | async)? 'totalPrice' : 'unitPrice'" 🤔🤔

Ответ №1:

sortField является текущим выбранным фильтруемым столбцом и будет обновляться в случае любого изменения значения.

вы можете установить его как простую строку

 <p-table [value]="offers" sortField="totalPrice">...<p-table>

в случае привязки данных вам необходимо использовать curly brackets [] 

 <p-table [value]="offers" [sortField]="totalPriceValue">...<p-table>

и для вас case isRelventPrice $ это сработает

  <p-table 
    [value]="offers" [sortField]="(isRelventPrice$ | async)? 'totalPrice' : 'unitPrice'">
....
</p-table>

проверьте эту демонстрацию 🚀

синтаксис привязки angular