PrimeNG Turbo Table Индивидуальные клеточные манипуляции с наблюдаемыми - PullRequest
Новая
       6

PrimeNG Turbo Table Индивидуальные клеточные манипуляции с наблюдаемыми

0 голосов
/ 28 ноября 2018

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

Одно из полей в документе называется 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

1 Ответ

0 голосов
/ 28 ноября 2018

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

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

...