我如何 pipe/map 到 return Angular 中的数组 7

Question

当我通过 HttpClient 进行 GET 调用时，我想传回一个实际类型化对象的数组，而不是一个泛型 'object'，所以我尝试这样做：

getExistingArsByLab(labId: number): Observable<EhsAssessmentAr[]> {
    return this.http
        .get<EhsAssessmentAr[]>(`${this.baseUrl}/ar?labId=${labId}`)
        .pipe(
            map(x => {
                const ret = EhsAssessmentAr.fromJson(x);
                ret.ar = this.sanitizer.sanitize(SecurityContext.HTML, ret.ar.replace(/\n/g, '<br/>'));
                return ret;
            })
        )
}

那个 fromJson 方法被声明为 return 正确的 class，我想既然我通过 map 发送这个，我会得到一个数组.我真的是 RxJs 的新手，所以我确定我只是在那里做了一些完全愚蠢的事情。

我收到错误：

TS2322: Type 'Observable<EhsAssessmentAr>' is not assignable to type 'Observable<EhsAssessmentAr[]>`

Answer 1

您可以强类型映射 响应并检查您returning 数组不是单个元素：

getExistingArsByLab(labId: number): Observable<EhsAssessmentAr[]> {
    return this.http
        .get<EhsAssessmentAr[]>(`${this.baseUrl}/ar?labId=${labId}`)
        .pipe(
            map((x:EhsAssessmentAr[]) => {
                const ret = EhsAssessmentAr.fromJson(x);
                ret.ar = this.sanitizer.sanitize(SecurityContext.HTML, ret.ar.replace(/\n/g, '<br/>'));
                return ret;
            })
        )
}

专业提示 2： 如果您出于任何原因更改 return 类型，您可以使用：

return <TypedArray[]> arrParsed["something"];

专业提示 3： Angular 讨厌你用 html 喂它所以你需要找到一些很酷的解决方案，比如在模板添加替换时标记到新行

Answer 2

这已经是 Angular 7 HttpClient 的默认行为。因此，除非您需要对 html 或示例中的内容进行一些额外处理，否则您只需要以下内容：

getExistingArsByLab(labId: number): Observable<EhsAssessmentAr[]> {
  return this.http
    .get<EhsAssessmentAr[]>(`${this.baseUrl}/ar?labId=${labId}`)
}

我如何 pipe/map 到 return Angular 中的数组 7

How do I pipe/map to return an array in Angular 7

pipe

rxjs

angular

rxjs6

angular7