Angular PUT请求出现[object%20Object]错误的修复咨询

核心问题分析 #

出现[object%20Object]的原因很明确：

• 你定义的updateUser方法要求接收数字类型的用户id，但提交时却把整个表单对象this.data传了进去，对象转字符串后就是[object Object]，URL编码后就变成了[object%20Object]。
• 同时，PUT请求的请求体应该是更新后的用户数据，而不是id，当前Service里的PUT请求把id作为请求体传递，这是错误的。
• 另外，Update组件没有从路由中获取首页传递过来的用户id，导致无法定位要更新的目标用户。

分步修复 #

1. 修正Service的updateUser方法 #

让方法同时接收用户id和更新的用户数据，PUT请求的URL用id拼接，请求体传用户数据：

updateUser(id: number, userData: User): Observable<User> {
  return this.http.put<User>(`${this.url}/${id}`, userData);
}

2. 在Update组件中获取路由传递的用户id #

在UpdateUserComponent中添加变量存储id，并在ngOnInit中从路由参数里取出id：

export class UpdateUserComponent implements OnInit {
  user?: User;
  data: any;
  userId?: number; // 新增变量存储用户id

  constructor(private service: AppService, private route: ActivatedRoute, private router: Router) { }

  ngOnInit(): void {
    // 从路由参数中获取id并转成数字类型
    const userIdStr = this.route.snapshot.paramMap.get('id');
    if (userIdStr) {
      this.userId = +userIdStr;
      // 可选优化：根据id拉取用户原有数据填充表单，提升体验
      // this.service.getUserById(this.userId).subscribe(user => {
      //   this.form.patchValue(user);
      // });
    }
  }

  // 表单定义不变
  form = new FormGroup({
    firstName: new FormControl('', [Validators.required]),
    lastName: new FormControl('', [Validators.required]),
    username: new FormControl('', [Validators.required]),
    mail: new FormControl('', [Validators.required]),
    password: new FormControl('', [Validators.required]),
  })

  // ...
}

3. 修正submit方法的调用逻辑 #

调用updateUser时传入正确的userId和表单数据，避免传错参数：

submit() {
  if (!this.userId) return; // 没有id则终止操作，避免报错
  this.data = this.form.value;
  console.log(this.data);

  this.service.updateUser(this.userId, this.data).subscribe(data => {
    console.log('用户更新成功:', data);
  });

  this.router.navigate(['/']);
}

4. 确认路由配置正确性 #

检查你的路由配置（通常是app-routing.module.ts），确保update路由正确接收id参数：

const routes: Routes = [
  // 其他路由...
  { path: 'update/:id', component: UpdateUserComponent },
];

内容的提问来源于stack exchange，提问作者Esma Harmancı