Question

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;
}

我在这里做什么错

Answer 1

这是签名错误。

您期望

Observable<Select2OptionData[]>

哪个是对象数组，但您返回

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

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

要返回数组：

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

Answer 2

您可以编写管道函数，如下所示：

getMethod(
term: string = '',
page: number = 0
): Observable<Select2OptionData[]> {
return this.http.get(`/api/something/foobar?q=${term}&page=${page}`)
  .pipe(
  .map(this.extractData)
  .catch(this.handleErrorObservable));

}

在此处处理错误和数据

 // if get successful response extract response
 private extractData(res: Response) {
 if (res.status === 200) {
  const body = res.json();
  return body;
  } else {
  return {};
  }
}

private handleErrorObservable(error: any) {
   // 401 - unAuthorized
   if (error) {
     return Observable.throw(new Error(error.status));
   }
   else {
      return Observable.throw(new Error(error.status));
    }

  }

如何在rxjs / operator中使用map

2 个答案: