1

我在我的 turbo 表中使用异步管道来显示来自 firestore 集合的文档。

文档中的一个字段被调用providerName，并且没有保存实际的提供者名称，而是保存了提供者 firebase id（嵌套对象）。这样，每当实际提供者对象更改（编辑操作）时，我将在原始文档中拥有正确的名称

目前我的primeng p-table显示提供者ID，所以我编写了以下代码来操作它

这是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函数？

4

2 回答 2

1

而不是从执行 async/firbase 调用的 HTML 模板调用方法。您可以使用 .map/for 循环在组件中执行相同的逻辑。最终结果可以分配给 HTML。

在 *ngFor 中调用 HTML 模板中的异步调用也会对性能产生影响，并且会使 UI 无响应。

于 2018-11-28T02:14:08.587 回答
0

您可以在之前调用 async 并使用as关键字声明不可观察：

<div *ngIf="test | async as t">
  <p-table [value]="t" [resizableColumns]="true" [autoLayout]="true">
  ...
  </p-table>
</div>
于 2021-02-21T17:09:45.033 回答