时间戳

首页 > 解决方案 > 如何在 rxjs/operator 中使用 map

angular - 如何在 rxjs/operator 中使用 map

问题描述

API调用将数据作为列表返回IAthing，我想映射到列表Select2OptionData

[
    {
        "prop1": 'vbn',
        "prop2": 'abc'
    },
    {
        "prop1": 'fgh',
        "prop2": 'tyyty'
    }
]

在来自文件的这个方法中，service我得到这个错误：

[ts] Type 'Observable<Select2OptionData>' is not assignable to type 'Observable<Select2OptionData[]>'

 getMethod(
    term: string = '',
    page: number = 0
  ): Observable<Select2OptionData[]> {
    return this.http
      .get(`/api/something/foobar?q=${term}&page=${page}`)
      .pipe(
        map((data: IAthing) => {
          return <Select2OptionData>{ id: data.prop1.toString(),
             text: data.prop2 };
        }),
        catchError(this.handleError)
      );
  }

Select2OptionData界面

export interface Select2OptionData {
    id: string;
    text: string;
    disabled?: boolean;
    children?: Array<Select2OptionData>;
    additional?: any;
}

export interface IAthing {
  prop1: string;
  prop2: string;
}

我在这里做错了什么

标签： angular

解决方案

这是一个签名错误。

你期待

Observable<Select2OptionData[]>

这是一个对象数组，但你返回

<Select2OptionData>{ id: data.prop1.toString(),
         text: data.prop2 }

这是一个对象。更改您的地图功能或您的签名。

要返回一个数组：

.pipe(
  map(response => response.map(item => ({ id: item.prop1, text: item.prop2 })))
)

推荐阅读