Многоуровневая карта слияния - http-запросы Typescript

Question

Я довольно новичок в машинописи, и у меня возникла проблема при попытке объединить несколько запросов вместе, чтобы дать мне объект для создания формы. Я работаю с API, который по сути является просто CRUD без каких-либо бизнес-логик c, поэтому я должен сделать это на внешнем интерфейсе.

Я должен запросить «форму», которая в свою очередь имеет количество элементов управления, запрошенных через отдельный вызов API. Каждый элемент управления затем должен сделать еще один вызов, чтобы получить дополнительную информацию «поля». Я играл с картой и слиянием, но, кажется, не могу сделать последний шаг на месте.

Без последнего шага к полям, он возвращает правильные данные ниже

    resolve(route: ActivatedRouteSnapshot): Observable<ResolvedData<IMatterForm>> | Promise<ResolvedData<IMatterForm>> | ResolvedData<IMatterForm> {
    return this.formService.getForm('07120d98-70a6-499b-917e-f225dac9fdaa').pipe(
        mergeMap((form: IForm) => {
            return this.formService.getControls(form.formID).pipe(                    
                map((controls: IFormControl[]) => {
                    // get the field for each control
                    return ({ data: { form, formControls: controls, fields: [] } });
                }),
                catchError(err => of({ data: null, errorMessage: err }))
            );
        }),
        catchError(err => of({ data: null, errorMessage: err }))
    );
}

Я не могу заполнить поля, хотя. Я пытался использовать from (controls.pipe ()), пробуя разные карты, но не уверен, что нужно.

Любые предложения, особенно с лучшим способом написать это, чтобы удалить вложение, было бы здорово. Или ссылки на пример, поскольку у меня нет терминологии для поиска, чтобы достичь этого.

Спасибо