Angular个人资料编辑表单报错：void类型上不存在subscribe及PUT方法优化咨询

存在的问题 #

• localStorage方法调用错误：原代码使用localStorage.getUsers("profile")，Web标准localStorage不存在getUsers方法，正确方法为getItem。
• 表单校验逻辑缺失：onFormSubmit已拿到表单valid状态，但未做合法性判断，无效表单也会触发接口请求。
• PUT请求传参错误：当前api.put仅传递了value.userId作为第二个参数，修改用户资料需要传递完整的待更新用户数据作为请求体，参数逻辑不符合PUT接口的常规设计。
• 路由跳转逻辑不合理：单页应用直接使用location.href会触发整页刷新，应该使用Angular自带的Router服务实现无刷新路由跳转。
• 无请求错误处理：subscribe仅配置了成功回调，接口报错时无任何提示和兜底逻辑，用户无法感知操作结果。
• 无用代码与变量未处理：RxJS导入的map/catch/throw操作符全程未使用；ngOnInit中取到的profile仅赋值给局部变量，未绑定到this.accountDetails，后续打印的this.accountDetails永远是空对象。
• TypeScript类型滥用：所有自定义变量都用any类型，失去了TS类型校验的能力，容易埋下隐式类型错误。

修正后完整代码 #

import { Component, OnInit } from '@angular/core';
import { BackendService } from 'src/app/services/backend.service';
import { Router } from '@angular/router';

// 定义用户类型约束，可根据实际业务补充字段
interface UserProfile {
  userId: string;
  [key: string]: any;
}

@Component({
  selector: 'app-edit-profile',
  templateUrl: './edit-profile.component.html',
  styleUrls: ['./edit-profile.component.css']
})
export class EditProfileComponent implements OnInit {
  public user: UserProfile = {} as UserProfile;
  public accountDetails: UserProfile = {} as UserProfile;

  constructor(
    private api: BackendService,
    private router: Router // 注入路由服务
  ) { }

  ngOnInit() {
    // 修正localStorage方法调用，加非空判断避免解析报错
    const profileStr = localStorage.getItem("profile");
    if(profileStr) {
      this.accountDetails = JSON.parse(profileStr);
    }
    console.log(this.accountDetails);
  }

  public onFormSubmit({ value, valid }: { value: UserProfile, valid: boolean }) {
    // 表单非法直接拦截，可自行补充表单无效的提示逻辑
    if(!valid) return;
    
    this.user = value;
    // 若你封装的BackendService的put方法参数为(url, 资源ID, 请求体)，可调整参数顺序为`"/users/editprofile", value.userId, value`
    this.api.put("/users/editprofile", value, false)
      .subscribe({
        next: (data: UserProfile) => {
          console.log(data);
          localStorage.setItem("profile", JSON.stringify(data));
          // 用路由服务实现无刷新跳转
          this.router.navigate(['/profile']);
        },
        error: (err) => {
          // 可自行补充错误提示逻辑
          console.error('资料修改失败：', err);
        }
      })
    }
  }

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