Angular2异步调用

我正面临一个经典的http竞赛问题，但我对Angular2和Observable不太熟悉以解决我的问题 .

这是我的砖块的描述：

[ FormComponent ]
    |    |
   1|    |6
    |    |
[ MetadataService ] <----4 & 5----> [ TranslatorService ]
    |    |
   2|    |3
    |    |
 [ Backend ]

• 我的表单组件向MetadataService询问表单的元数据

• Metadataservice对后端进行HTTP调用以检索这些元数据

• 后端以JSON格式返回元数据

• MetadataService将JSON传输到TranslatorService

• TranslatorService在JSON中进行一些翻译并将数组返回给MetadataService

• MetadataService将数组返回给FormComponent .

这个体系结构看起来很简单，但是我实现它的方式有些不对，因为在我的视图中，元数据属性是“未定义的”，因此* ngFor会抛出错误我的第一个想法是订阅组件中的Observable但我不知道如何处理这些Observables，因为我有两项服务 .

从我看来，问题来自第四步：

MetadataService

getFormMetaData(folderId: string, context: string){
    let body = JSON.stringify({
                   folderId: folderId,
                   context: context
               });
    return this.http.post(this.uri, body, options)
                            .map( (res) => { 
                                    let body = res.json();
                                    if (body.data){
                                        return this.translatorService.getTranslatedElements(body.data);
                                    }
                                } 
                            );
}

它应该返回一个Observable，但是map（）方法返回TranslatorService的值，它是一个数组...

我应该怎么做 ？

编辑：这是我的FormComponent：

FormComponent

@Component({
    template: `
        <dynamic-form controls="formMetadata | async"></dynamic-form>
    `,
    providers: [MetadataService]
})
export class CustomerFormComponent {

    formMetadata: any; 

    constructor(private metadataService: MetadataService) { }

    ngOnInit() {
        this.formMetadata = this.formMetadataService.getFormMetadata('FR75P00000012', 'UserInformation');
    }
}

和我的翻译服务：

TranslatorService

getTranslatedElements(metadata: any) {
    debugger; // It never breaks here
    let elements = [];

    metadata.forEach( (field) => { 
        ...
        elements.push(field);
    } ) 

    return elements;

}

更新：

好的，我提前了一点 . 似乎问题来自我的异步管道，我在FormComponent模板中使用它来将数据传递给子组件 .

这个子组件是否应该以特定方式处理这种异步数据？

Solution 如何浪费时间进行调试：忘记将数据绑定属性放在括号内 .

<dynamic-form controls="formMetadata"></dynamic-form>

应该

<dynamic-form [controls]="formMetadata"></dynamic-form>

这解释了为什么DynamicFormComponent收到一个字符串作为输入...

Solution 2 实际上，即使订阅功能加载数据，我仍然遇到了子组件实例化的问题 . 我已经能够通过 <dynamic-form [controls]="formMetadata" *ngIf="formMetadata"></dynamic-form> 来解决这个问题

我无法使用异步管道，它不起作用 . 我不知道什么时候父模板中的异步触发器，但它似乎是在子组件构造函数（）和noOnInit（）之后