Angular组件赋值benefactorID报错：Cannot set properties of undefined

你遇到的错误核心原因是：仅通过非空断言!声明了acceptAccommodation变量，但未实际初始化对象实例。TypeScript的非空断言只是编译期的类型提示，不会在运行时自动创建对象，因此直接赋值属性时会触发undefined错误。

以下是三种可行的解决方式：

方法1：声明时直接初始化对象 #

在变量声明处直接创建符合AcceptAccommodation接口的对象实例：

class ShowAccommodationDialogComponent {
  // 初始化默认对象，后续修改属性值
  acceptAccommodation: AcceptAccommodation = { benefactorID: 0 };

  constructor(
    @Inject(MAT_DIALOG_DATA) public data: number,
    private refugeeService: RefugeeService,
    private toastr: ToastrService,
  ) {}

  confirmAccommodation(){
    this.acceptAccommodation.benefactorID = this.data;
    this.refugeeService.confirmAccommodation(this.acceptAccommodation).subscribe(res =>{
      this.toastr.info("Confirmed!")
    })
  }
}

方法2：在构造函数内初始化 #

若需要依赖构造函数中的数据初始化，可在构造函数内完成对象创建：

class ShowAccommodationDialogComponent {
  acceptAccommodation!: AcceptAccommodation;

  constructor(
    @Inject(MAT_DIALOG_DATA) public data: number,
    private refugeeService: RefugeeService,
    private toastr: ToastrService,
  ) {
    // 直接用传入的data初始化对象
    this.acceptAccommodation = { benefactorID: this.data };
  }

  confirmAccommodation(){
    this.refugeeService.confirmAccommodation(this.acceptAccommodation).subscribe(res =>{
      this.toastr.info("Confirmed!")
    })
  }
}

方法3：调用方法时动态创建实例 #

如果不需要提前保留对象，可在confirmAccommodation方法内直接创建符合接口的对象并传入：

class ShowAccommodationDialogComponent {
  constructor(
    @Inject(MAT_DIALOG_DATA) public data: number,
    private refugeeService: RefugeeService,
    private toastr: ToastrService,
  ) {}

  confirmAccommodation(){
    // 动态创建对象，无需提前声明成员变量
    const acceptData: AcceptAccommodation = { benefactorID: this.data };
    this.refugeeService.confirmAccommodation(acceptData).subscribe(res =>{
      this.toastr.info("Confirmed!")
    })
  }
}

关键提示 #

• 非空断言!仅作用于TypeScript编译阶段，不能替代运行时的对象初始化操作。
• AcceptAccommodation是类型接口，无法通过new关键字创建实例，必须通过字面量对象或类型断言生成符合约束的对象。

内容的提问来源于stack exchange，提问作者Kamil Wójcik