Асинхронный пайп или как обновить значение после подгрузки данных?

Question

[Евгений Лубяной]

В различных частях сайта требуется выводить суммы с указанием валюты и еще некоторыми модификациями в зависимости от валюты.
С бека прилетает информация в формате

IMoney {
  sum: number;
  currencyId: number;
}

Требуется пайп, который отобразит это в виде 123$ или 234ETH в зависимости от currencyId

Информация о валютах храниться в сервисе, и этот сервис запрашивает информацию с бека.

Часто случается ситуация что информация, которую надо отобразить загружается раньше чем информация о валютах и пайп не находит нужную валюту. Как это можно решить? Может пайп может отдавать информацию не мгновенно а по срабатыванию Observer'ра?

Answer 1

[Qairat]

думаю можно сделать вот так:
в компоненте где надо использовать pipe,
для начало запрашиваешь информацию о валютах,

loading: boolean = false;
 ngOnInit() {
   this.loading = true;
   this.service.getInfoValute().subscribe(res => {
     if (res) {
        this.loading = false;
     }
   });
 }

а в шаблоне проверку поставить:

<ng-container *ngIf="!loading">
  <div>{{ IMoney | pipe }}</div>
</ng-container>

Answer 2

[Дмитрий Еремин]

Я так понял, вам нужно подписаться на валюты и на суммы
Когда обе пачки данных придут с бэка, выдать производное (сумма, плюс обозначение валюты)
Звучит как
combineLatest

combineLatest(money$,currency$).subscribe(data = > /*тут работа с массивов, где data[0] - это последние пришедшие данные от money$ и data[1] - последние от currency$*/)
или
combineLatest(money$,currency$).subscribe(([money, currency]) = > /*...ваша логика*/)

Comments

[Евгений Лубяной]

Как сделать это в пайпе? когда суммы приходят из шаблона а валюты из сервиса

[Дмитрий Еремин]

Тут придется, все же документаицю глянуть
https://angular.io/api/common/CurrencyPipe

<!--output '$0.26'-->
    <p>A: {{a | currency}}</p>

    <!--output 'CA$0.26'-->
    <p>A: {{a | currency:'CAD'}}</p>

    <!--output 'CAD0.26'-->
    <p>A: {{a | currency:'CAD':'code'}}</p>

    <!--output 'CA$0,001.35'-->
    <p>B: {{b | currency:'CAD':'symbol':'4.2-2'}}</p>

    <!--output '$0,001.35'-->
    <p>B: {{b | currency:'CAD':'symbol-narrow':'4.2-2'}}</p>

    <!--output '0 001,35 CA$'-->
    <p>B: {{b | currency:'CAD':'symbol':'4.2-2':'fr'}}</p>

    <!--output 'CLP1' because CLP has no cents-->
    <p>B: {{b | currency:'CLP'}}</p>

[Евгений Лубяной]

Дмитрий Еремин, спасибо. знаю.
Однако ETH там нет. и с бека прилетает ID валюты
И в целом хочется узнать, есть ли возможность сделать асинхронный пайп?

[Дмитрий Еремин]

arswarog, ну создайте свой pipe и пользуйтесь. Задача не сложная
https://metanit.com/web/angular2/8.2.php