Angular12报错Property 'json' does not exist on type 'User'求解决方案

报错原因 #

• 你使用的Angular 12内置的HttpClient模块，默认会自动将响应体解析为JSON格式，不需要手动调用.json()方法处理返回值
• 调用post方法时你已经指定了泛型<User>，接口返回的响应会直接被映射为User类型的对象，该类型上没有定义json方法，所以触发了TS类型报错
• 你代码中残留的Headers、RequestOptions都是Angular 4.3版本之前废弃的旧Http模块API，新版本无需使用

解决方案 #

直接修改service.ts中的PostUser方法即可，你不需要手动序列化请求体、不需要手动调用.json()解析响应，HttpClient会自动完成这些操作：

// 先确认service顶部导入的是@angular/common/http下的HttpClient
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { User } from './model'; // 替换为你实际的model文件路径

// 确保service构造函数中已经注入HttpClient
constructor(private http: HttpClient) { }

// 修改后的PostUser方法
PostUser(usr : User): Observable<User>{
  const headersOption = { 'Content-Type' : 'application/json' };
  // 直接传入usr对象即可，HttpClient会自动序列化为JSON字符串
  return this.http.post<User>('https://localhost:44339/api/Users', usr, { headers: headersOption });
}

额外注意事项 #

确保你的根模块app.module.ts中已经导入了HttpClientModule，否则请求会报错：

import { HttpClientModule } from '@angular/common/http';

@NgModule({
  imports: [
    // 其他已有导入项
    HttpClientModule
  ]
})

内容的提问来源于stack exchange，提问作者Mike_123