Angular post 方法类型“Observable<HttpEvent>”不可分配给类型“Observable”。类型“HttpEvent”不可分配给类型“TestUser”

Question

我正在尝试使用 POST 方法将一些数据保存到我的测试服务器。 （服务器本身的方法已经在做它们的工作了）

我希望能够将用户数据添加到单独的输入字段，并用一个按钮将它们发送到服务器，这样我就可以用另一个按钮显示存储的数据。 get 方法已经完成了工作并显示了来自我的服务器的测试数据，但是我在使用 post 方法时遇到了问题。

我在 addUser() 函数上收到此消息，即使我尝试改编英雄之旅帖子示例。

我错过了什么或做错了什么？

TS2322：类型“Observable”不可分配给 输入“可观察”。类型“HttpEvent”不是 可分配给类型“TestUser”。类型“HttpSentEvent”缺少 以下属性来自“TestUser”类型：id、firstName、lastName、 活跃

testService.ts

import {Injectable} from '@angular/core';
import {HttpClient} from '@angular/common/http';
import {Observable, throwError} from 'rxjs';
import {TestUser} from './testUser';
import {catchError, tap} from 'rxjs/operators';
    
@Injectable({
  providedIn: 'root'
})
export class TestService {
    
  testUrl = 'http://localhost:3000/users';
    
  constructor(private http: HttpClient) {}
    
  getUser(id: number): Observable<TestUser> {
    const url = `${this.testUrl}/${id}`;
    console.log('a');
    console.log(this.http.get<TestUser>(this.testUrl));
    return this.http.get<TestUser>(url);
  }
    
  addUser(newUser: TestUser): Observable<TestUser> {
    return this.http.post<TestUser>(this.testUrl, newUser, this.httpOptions);
  }
}

testUser.ts

export interface TestUser {
  id: number;
  firstName: string;
  lastName: string;
  isActive: boolean;
}
    
export const TEST_USER_EMPTY: TestUser = {
  id: 0,
  firstName: '',
  lastName: '',
  isActive: false,
};

Answer 1

你应该关注post方法中的最后一个参数——this.httpOptions。不幸的是，您没有与我们分享它的样子，但是查看 HttpClient 的定义我们发现，根据为 post 方法传递的参数，它可能返回不同的类型——其中之一是

Observable<HttpEvent<Object>>

您是否在选项中使用以下语句？

observe: 'events';

如果不是，可能是 httpOptions 对象的格式不正确，以至于角度返回错误的类型。

Answer 2

你能展示一下你的

httpOptions

吗？如果你用 {} 初始化它，那就没问题了。这对我有用