Question

示例代码：

  public settings$: Observable<
    SettingsResponse
  > = this._service.getSettings().pipe();

然后在我使用的模板中

{{ (settings$ | async)?.id }}
{{ (settings$ | async)?.config }}

这将对api进行两次调用。我该如何使用可观察的且只有1个通话的方式来做到这一点？

Answer 1

将shareReplay(1)运算符添加到管道中：

public settings$: Observable<SettingsResponse> = this._service.getSettings().pipe(
    shareReplay(1)
);

这将缓存最新值，并将其提供给所有订户，包括后期订户。如果您不希望迟到的订户获得最新的值并且仅获取传入的值，请使用share运算符。

更多详细信息here。

Answer 2

as关键字和*ngIf运算符可用于捕获要在模板的其余部分中使用的async管道的结果。将其添加到父标签或ng-container中，如果您不想在dom中引入更多元素。

<ng-container *ngIf="settings$ | async as settings"> // <-- or div
  {{ settings.id }}
  {{ (settings.config }}
</ng-container>