Angular 7赋值SampleRequest的user/category.id时遇TypeError错误求助

嘿，我来帮你搞定这个报错～你遇到的问题根源很清晰：当你实例化SampleRequest的时候，category和user这两个嵌套属性并没有被初始化为对象，它们默认是undefined，所以你直接去设置this.sampleRequest.category.id自然会抛出错误——毕竟你不能给一个不存在的对象设置属性嘛。

下面给你几种可行的解决方案，选一种适合你的就行：

方案1：修改SampleRequest类，默认初始化嵌套对象 #

直接在类里给category和user设置默认值，或者通过构造函数初始化，这样每次实例化的时候它们就是一个带id属性的对象了：

export class SampleRequest {
  title: string;
  // 直接初始化嵌套对象
  category: { id: number} = { id: 0 };
  user: { id: number} = { id: 0 };
  description: string;
  quantity: number;

  // 或者用构造函数初始化（二选一即可）
  // constructor() {
  //   this.category = { id: 0 };
  //   this.user = { id: 0 };
  // }
}

这样你原来的onSubmit代码就可以正常运行了，不用做其他修改。

方案2：在onSubmit中先创建嵌套对象再赋值 #

如果你不想修改类的结构，可以在提交的时候先给category和user赋值为对象，再设置它们的id：

onSubmit() {
  this.sampleRequest.title = this.requestForm.get('title').value;
  // 先创建category对象，再设置id
  this.sampleRequest.category = { id: this.requestForm.get('category').value };
  // 同样处理user对象
  this.sampleRequest.user = { id: this.tokenStorage.getUser().id };
  this.sampleRequest.description = this.requestForm.get('description').value;
  this.sampleRequest.quantity = this.requestForm.get('quantity').value;

  console.log(this.sampleRequest);
  this.userService.newSampleRequest(this.sampleRequest)
    .subscribe( data => {
        this.isSuccessful = true;
        this.isProgress = false; // 这里建议把进度状态设为false，请求完成就结束加载
      }, error => {
        this.isFailed = true;
        this.isProgress = false;
        this.errMsg = error.error.message;
      }
    );
}

方案3：直接构建完整请求对象（更简洁） #

其实你完全可以跳过先实例化SampleRequest再逐个赋值的步骤，直接从表单和令牌数据构建符合要求的对象，代码更简洁也不容易出错：

onSubmit() {
  if (this.requestForm.invalid) {
    return; // 先判断表单是否有效，避免无效提交
  }
  
  const formData = this.requestForm.value;
  const currentUser = this.tokenStorage.getUser();

  // 直接构建符合后端要求的请求对象
  const sampleRequest: SampleRequest = {
    title: formData.title,
    category: { id: formData.category },
    user: { id: currentUser.id },
    description: formData.description,
    quantity: formData.quantity
  };

  console.log(sampleRequest);
  this.isProgress = true; // 开始请求时设置加载状态
  this.userService.newSampleRequest(sampleRequest)
    .subscribe( data => {
        this.isSuccessful = true;
        this.isFailed = false;
        this.isProgress = false;
      }, error => {
        this.isFailed = true;
        this.isSuccessful = false;
        this.isProgress = false;
        this.errMsg = error.error.message;
      }
    );
}

额外小提示： #

你表单里的quantity验证器Validators.pattern需要传入正则表达式参数哦，比如Validators.pattern(/^[1-9]\d*$/)来确保输入的是正整数，不然这个验证器不会生效。

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