“对象”类型可分配给极少数其他类型。您的意思是改用“任何”类型吗？

Question

我有一个相当复杂的代码已经运行了两天，我正在使用 rxjs 运算符中的 map 运算符从 IUser 接口中获取 IUser 的值。但我不断收到此错误：

“OperatorFunction”类型的参数不可分配给“OperatorFunction

提前致谢。

Account.service.ts

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Router } from '@angular/router';
import { BehaviorSubject } from 'rxjs';
import { map } from 'rxjs/operators';
import { environment } from 'src/environments/environment';
import { IUser } from '../shared/models/user';

@Injectable({
  providedIn: 'root'
})
export class AccountService {
  baseUrl = environment.apiUrl;
  private currentUserSource = new BehaviorSubject<IUser>(null!);
  currentUser$ = this.currentUserSource.asObservable();

  constructor(private http: HttpClient, private router: Router) { }

  login(values: any) {
    return this.http.post(this.baseUrl + 'account/login', values).pipe(
      map((user: IUser) => {
        if (user) {
          localStorage.setItem('token', user.token);
          this.currentUserSource.next(user)
        }
      })
    );
  }

login.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.scss']
})
export class LoginComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

}

用户.ts

export interface IUser  {
    email: string;
    displayName: string;
    token: string;
} 

Answer 1

来自HttpClient post()，

重载 #14

post(url: string, body: any | null, options?: {
        headers?: HttpHeaders | {
            [header: string]: string | string[];
        };
        context?: HttpContext;
        observe?: 'body';
        params?: HttpParams | {
            [param: string]: string | number | boolean | ReadonlyArray<string | number | boolean>;
        };
        reportProgress?: boolean;
        responseType?: 'json';
        withCredentials?: boolean;
    }): Observable<Object>;

如果.post() [Overload #14] 不指定T，它将返回Observable<Object> 值。

重载 #15

post<T>(url: string, body: any | null, options?: {
        headers?: HttpHeaders | {
            [header: string]: string | string[];
        };
        context?: HttpContext;
        observe?: 'body';
        params?: HttpParams | {
            [param: string]: string | number | boolean | ReadonlyArray<string | number | boolean>;
        };
        reportProgress?: boolean;
        responseType?: 'json';
        withCredentials?: boolean;
    }): Observable<T>;

从post() [Overload #15]，您必须指定T，例如post<T>()，这样它将返回Observable<T> 值。

---

解决方案

假设：返回的响应是IUser类型。

1. 将T 指定为IUser 或any 类型以解决上述错误。

2. 正如@Gunnar 的评论，你必须使用 tap 而不是 map 从源 observable 执行操作而不改变它。

   使用map必须返回Observable的值。

login(values: any) {
  return this.http.post<IUser>(this.baseUrl + 'account/login', values).pipe(
    tap((user: IUser) => {
      if (user) {
        localStorage.setItem('token', user.token);
        this.currentUserSource.next(user);
      }
    })
  );
}