Управление отдельными ячейками турбо-таблицы PrimeNG с помощью наблюдаемых

Я использую асинхронный канал в своей турбо-таблице для отображения документов из коллекции firestore.

Одно из полей в документе называется providerName, и там вместо сохранения фактического имени поставщика я сохраняю идентификатор поставщика firebase (вложенный объект). Таким образом, всякий раз, когда фактический объект поставщика изменяется (операция редактирования), у меня будет правильное имя в моем исходном документе.

В настоящее время моя p-таблица primeng показывает идентификатор поставщика, поэтому я написал следующий код для управления им.

Вот код template.html

<p-table #dt [columns]="cols" [value]="expenseService.expenses$ | async" dataKey="id">
        <ng-template pTemplate="body" let-expense>
          <tr [pSelectableRow]="expense">
            <td *ngFor="let col of cols" [ngSwitch]="col.field">
              <span *ngSwitchCase="'serviceProviderName'">{{getName(expense)}}</span> <--- this is the important line
              <span *ngSwitchCase="'amount'">{{expense.amount | number:'1.0-0'}}</span>
              <span *ngSwitchDefault>{{ expense[col.field] }}</span>

            </td>
          </tr>
        </ng-template>
      </p-table>

и в моем компоненте у меня есть следующая реализация getName ()

  getName(event) {
    const label = this.serviceProviders.filter(x => x.value === event.serviceProviderName);
    if (label && label[0]) {
      return label[0].label;
    } else {
      return event.serviceProviderName;
    }
  }

serviceProviders пуст в то время, когда таблица отображается как заполненная наблюдаемым объектом, поэтому здесь возникает мой вопрос.

Как мне получить информацию о том, что serviceProviders готов, а затем вызвать функцию getName?


firebase google-cloud-firestore angular primeng primeng-turbotable
person naoru    schedule 28.11.2018    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Вместо вызова метода из HTML-шаблона, который выполняет вызов async / firbase. Вы можете выполнить ту же логику в компоненте, используя цикл .map / for. Окончательный результат можно присвоить HTML.

Также вызов асинхронного вызова в шаблоне HTML в * ngFor повлияет на производительность и приведет к зависанию пользовательского интерфейса.

person Suresh Kumar Ariya    schedule 28.11.2018
comment
Действительно? Я думал, что вызов его с использованием асинхронного канала был предпочтительным способом - person naoru; 28.11.2018
comment
async - предпочтительный способ, если вы не хотите манипулировать результатом. В вашем случае вы можете использовать другой API и обновить результат. Это не вписывается в асинхронный режим - person Suresh Kumar Ariya; 29.11.2018

arrow_upward
0
arrow_downward

Вы можете просто вызвать async раньше и использовать ключевое слово as для объявления ненаблюдаемого:

<div *ngIf="test | async as t">
  <p-table [value]="t" [resizableColumns]="true" [autoLayout]="true">
  ...
  </p-table>
</div>
person Jonathan    schedule 21.02.2021