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

Question

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

Мне нужно запросить "форму", которая, в свою очередь, содержит ряд "элементов управления", запрошенных через отдельный вызов 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()), пробуя разные карты, но не уверен, что нужно.

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

Спасибо