Блог

Главная - Вопросы по программированию - Угловое сглаживание наблюдаемого потока

Угловое сглаживание наблюдаемого потока

#angular #rxjs #ngx-bootstrap

#угловое #rxjs #ngx-bootstrap

Вопрос:

У меня есть следующий угловой код, который вызывает службу, которая возвращает наблюдаемый

 this.dataSource = Observable.create((observer: any) => {
    observer.next(this.asyncSelected);
})
.pipe(
    mergeMap((token: string) =>
        this._animalSuffixesServiceProxy.getAll(token, undefined, undefined, undefined)
    )
);

getAll Метод возвращает наблюдаемый в следующем формате:

 {"result":{"totalCount":2,"items":[{"animalSuffix":{"name":"Test","id":1}},{"animalSuffix":{"name":"Test2","id":2}}]}}

Предполагая, что изменение способа getAll работы не является опцией, я хотел бы знать, как наилучшим образом передать этот ответ через наблюдаемые операторы, чтобы я мог получить сглаженный наблюдаемый объект, который выглядит следующим образом:

 [{"name":"Test","id":1},{"name":"Test2","id":2}]

Ответ №1:

Вы должны иметь возможность использовать map оператор для обработки вашего ответа в желаемом формате. Это должно быть похоже на следующее:

 this.dataSource = Observable.create((observer: any) => {
    observer.next(this.asyncSelected);
})
.pipe(
    mergeMap((token: string) =>
        this._animalSuffixesServiceProxy.getAll(token, undefined, undefined, undefined)
    ),
    map(response => response.result.items.map(item => item.animalSuffix))
);

Это сопоставляет ваш ответ с массивом ваших элементов, причем значение для каждого элемента является animalSuffix значением элемента ответа.

map В pipe() — это оператор RxJS для отображения над каждым элементом, испускаемым в наблюдаемом. Другой map — оператор массива (оба они ведут себя одинаково).

Комментарии:

1. Спасибо за ваш ответ, он указал мне правильное направление. Однако я обнаружил, что мне пришлось поместить в map качестве канала внутри mergeMap наблюдаемого ответа getAll() . Мое понимание наблюдаемых очень ограничено, но ожидается ли это?

2. @tkha007 Вам не нужно это делать там. Вы должны получить тот же результат, если вытащите свой измененный код pipe , который вы добавили в свой .getAll(...) , и поместите его туда, где у меня было выше. Что вы испытывали, что было другим?

3. Если я сохраню его, как вы предложили, tsc пожалуется на эту ошибку Property 'result' does not exist on type '{}'