Наблюдаемый объект в шаблоне вызывает API дважды

Question

Пример кода:

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

Тогда в шаблоне я использую:

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

Это делает два вызова API. Как я могу сделать это с наблюдаемым и иметь только 1 звонок?

Answer 1

Ключевое слово as вместе с оператором *ngIf можно использовать для захвата результата канала async, который будет использоваться в остальной части шаблона. Добавьте его в родительский тег или ng-container, если вы не хотите вводить больше элементов в dom.

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

Здесь задокументировано: https://angular.io/api/common/NgIf#storing-a-conditional-result-in-a-variable

Answer 2

Добавьте оператор shareReplay(1) в свой канал:

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

Это кэширует самое последнее значение и предоставляет его всем подписчикам, включая поздних подписчиков. Если вы не хотите, чтобы поздние подписчики получали самые последние значения и получали значения только по мере их поступления, используйте оператор share.

Подробнее здесь .