Как правильно связать зависимые Asyn c Pipes в Angular - PullRequest
0 голосов
/ 20 марта 2020

В моем коде есть 3 асин c трубы.

<div>{{formatedData$ | async}}</div>

<div>{{totalStatusData$ | async }}</div>

<div>{{totalPercentageData$ | async}}</div>

component.ts

Фактические данные, возвращенные из сервиса как следует

[{
        "name": "one",
        "steps": [{
                "id": 1,
                "passed": 1,
                "failed": 3
            },
            {
                "id": 2,
                "passed": 4,
                "failed": 0
            }
        ]
    },
    {
        "name": "two",
        "steps": [{
                "id":3 ,
                "passed": 10,
                "failed": 3
            },
            {
                "id": 4,
                "passed": 4,
                "failed": 8
            }
        ]
    }
]

this.formatedData$ = this.service.data().pipe(map(data) => {

return this.formatData1();

})

теперь this.formatedData $ следует

[{
        "name": "one",
        "passed": 5,
        "failed": 3
    },
    {
        "name": "two",
        "passed": 14,
        "failed": 11
    }
]

this.totalStatusData$=this.formatedData$.pipe(map(data) => {
return formatData2(data)
});

Теперь this.totalStatusData $ следует

    {

        "passed": 19,
        "failed": 14
    }

$totalPercentageData = this.totalStatusData$.pipe(map(data) => {

return this.formatData3(data);

}) 

Теперь $ totalPercentageData выглядит следующим образом

{

        "passed": "57.57%",
        "failed": "42.42%"
    }

Как я могу связать эти Наблюдаемые в Одно вместо одного, не разрывая цепочку Наблюдаемых, начиная с фактических данных обслуживания.

1 Ответ

0 голосов
/ 20 марта 2020

Если я правильно понимаю, вам нужно передать шаблон html тремя различными преобразованиями данных, возвращаемых при однократном вызове асинхронной c службы .

Итак, если это так, вы можете попробовать следующую стратегию:

// create an Observable that subscribes to the source, 
// in this case the service data call, and then shares this one subscription
// with the all other Observables that are created starting from it
this.data$ = this.service.data().pipe(
  share()
)

// then you create ab Observable that performs the first transformation
this.formatedData$ = this.data$.pipe(map(data) => {
  return this.formatData1();
})

// then you create an Observable that performs the second transformation 
// based on the results of the first transformation
this.totalStatusData$ = this.formatedData$.pipe(map(data) => {
   return formatData2(data)
});

// and so on

Идея здесь состоит в том, чтобы использовать оператор share для вызова только один раз удаленный API, обернутый this.service.data().

...