我如何从可观察对象创建对象，该对象返回对象数组

Posted 2021-04-19

我有一个Observable，它从Web服务中提取一些数据并返回一个看起来像这样的对象数组。

可观察对象是这样创建的

contactFields$: Observable<IServerDropdownOption[]>;
this.contactFields$ = this.mailTemplateService.templateLookup(this.guids.MAIL_TEMPLATE_CONTACT_FIELDS);

哪个返回这样的内容

[
     {value: "{{ first_name | fallback: "" }}", name: "First Name", selected: undefined},
     {value: "{{ last_name | fallback: "" }}", name: "Last Name", selected: undefined}
]

我需要能够将此对象数组转换为最终看起来像这样的对象。

{
 "{{ first_name | fallback: "" }}" : "First Name",
 "{{ last_name | fallback: "" }}" : "Last Name"
}

修订的ngOnInit（）代码

  ngOnInit() {
    this.contactFields$ = this.mailTemplateService.templateLookup(this.guids.MAIL_TEMPLATE_CONTACT_FIELDS);
    this.contactFields$.subscribe(res => console.log(res));
    this.transformArr();
    this.initForm();
    // Custom button
    FroalaEditor.DefineIcon('my_dropdown', {NAME: 'cog', SVG_KEY: 'cogs'});
    FroalaEditor.RegisterCommand('my_dropdown', {
    title: 'User Fields',
    type: 'dropdown',
    focus: false,
    undo: false,
    refreshAfterCallback: true,
    options: this.result,

    callback(cmd, val) {
        console.log (val);
    },
    // Callback on refresh.
    refresh($btn) {
        console.log ('do refresh');
    },
    // Callback on dropdown show.
    refreshOnShow($btn, $dropdown) {
        console.log ('do refresh when show');
    }
    });

TransformArray代码

transformArr() {
    console.log('Calling Transform');
    this.contactFields$.subscribe(res => {

    this.result = new Object() as { [key: string]: string; };

    for (const each of res) {
        console.log('Looping');
        this.result[each.value] = each.name;
        console.log(this.result);
  }
});
 }

答案

const transformArr = (arr) => {
   let result = {}
   arr.map(each => {
      result[each.value] = each.name;
   })
   return result;
}
应根据您的描述工作。

另一答案

我会将subscribe替换为所需组件中的observable，而不是使用pipe，因为这会影响您的IServerDropdownOption返回类型。