TS2322：类型“Observable<Observable<MyObject>>”不可分配给类型“Observable<MyObject>”答案

【问题标题】：TS2322: Type 'Observable<Observable<MyObject>>' is not assignable to type 'Observable<MyObject>'TS2322：类型“Observable<Observable<MyObject>>”不可分配给类型“Observable<MyObject>”
【发布时间】：2021-11-22 20:11:22
【问题描述】：

我决定使用官方 Angular 升级指南从 Angular 4.x 升级到 Angular 6.0。在修复了所有在 RxJS 5 和 RxJS 6 之间更改的 switchMaps、mergeMaps 和其他导入后，我的应用程序不再工作了。问题出在我的 @Injectable() 中，因为我使用的是自定义 HttpHeaders。

这是我当前的代码，它通常在以前的 Angular 和 RxJS 版本上工作。

users.service.ts

buildHeaders(): Observable<any> {
  if (!auth.enabled) {
    return from(new Promise((resolve, reject) => {
      resolve(new HttpHeaders());
    }));
  }

  return from(this.authService.getHeaders())
    .pipe(
      map(header => {
        return new HttpHeaders(header);
      }));
}

getUsers(id: number): Observable<MyObject> {
  const path = `${url}/Users/${id}`;

  return this.buildHeaders()
    .pipe(
      mergeMap(headers => {
        return this.http.get<MyObject>(path, { 'headers': headers });
    }));
 }

我做错了什么？如果我将getUsers() 的结果定义为Observable<any>，它看起来就像它工作。此外，如果我删除 buildHeaders() 函数，错误也会消失。感谢您的帮助。

编辑：添加代码，该代码在 Angular/RxJS 升级之前工作

buildHeaders(): Observable<any> {
  if (!auth.enabled) {
    return Observable.fromPromise(new Promise((resolve, reject) => {
      resolve(new HttpHeaders());
    }));
  }
  
  return Observable.fromPromise(this.authService.getHeaders())
    .map(header => {
      return new HttpHeaders(header);
    });
}

getUsers(id: number): Observable<MyObject> {
  const path = `${url}/Users/${id}`;

  return this.buildHeaders()
    .mergeMap(headers => {
      return this.http.get<MyObject>(path, { 'headers': headers });
    });
}

编辑 2：删除/注释掉后

if (!auth.enabled) {
  return Observable.fromPromise(new Promise((resolve, reject) => {
    resolve(new HttpHeaders());
  }));
}

并将返回类型更改为Observable<HttpHeaders>，正如评论中提到的@JSmart523，错误似乎消失了。看起来那段代码有问题，例如。返回类型错误。

【问题讨论】：

错误发生在哪一行？
它在行中说，return this.buildHeaders() 是
我们能看看 authService.getHeaders 长什么样子吗？
只是为了验证，我注意到在您的代码中，函数 getUsers 末尾缺少一些括号。最后一行应该添加：return this.http.get(path, { 'headers': headers }) }));
好的。将 buildHeaders 的返回类型更改为 Observable<HttpHeaders>。这将有助于揭示问题。

标签： angular rxjs

【解决方案1】：

我想你想要的是这个……

buildHeaders(): Observable<HttpHeaders> {
  if (!auth.enabled) {
    return of(new HttpHeaders());
  } else {
    return from(this.authService.getHeaders()).pipe(
      map(header => new HttpHeaders(header))
    );
  }
}

map 作为 observables 的方法已被弃用。相反，运算符是独立的函数，在 observables 的 pipe 方法中用作参数。

您必须从“rxjs”导入of 和from，并从“rxjs/operators”导入map。 of 返回一个发出参数的 observable。 from 返回一个 observable，它发出参数的“内容”……通常用于解包数组和 promise……

【讨论】：