Angular中给DocumentModel赋值报Cannot set properties of undefined错误如何解决

• 仅声明类型未初始化实例：TypeScript的类型标注仅在编译阶段做类型校验，不会为变量自动生成对应实例。你只给documentsArray标注了DocumentModel类型，没有实际赋值，运行时该变量的值为undefined，对undefined的filename属性赋值自然会触发该错误。
• 类型定义与实际使用逻辑不符：变量名带有Array后缀，且代码中存在this.documentsArray[0]的数组下标访问操作，但你声明的类型是单个DocumentModel对象而非DocumentModel[]数组，存在逻辑冲突。

场景1：业务需要单个DocumentModel对象 #

首先在变量声明阶段完成初始化：
如果DocumentModel是接口类型，使用类型断言初始化：

documentsArray: DocumentModel = {} as DocumentModel;

如果DocumentModel是类类型，直接实例化：

documentsArray: DocumentModel = new DocumentModel();

修改后即可正常对documentsArray的属性赋值。

场景2：业务需要DocumentModel数组存储多份文件数据 #

先修正变量的类型定义并初始化空数组：

documentsArray: DocumentModel[] = [];

修改上传方法，每次上传时创建新的DocumentModel实例再存入数组：

uploadFile(files: FileList | null): void {
  if(files){
    const file = files.item(0)
    const reader = new FileReader()
    reader.readAsDataURL(file)
    reader.onload = () => {
      // 新建实例赋值
      const newDoc: DocumentModel = {} as DocumentModel;
      newDoc.filename = file.name;
      // 按需补充其他字段赋值
      this.documentsArray.push(newDoc);

      this.api.saveDocument({body: newDoc}).subscribe({
        next: data => console.log(data),
        error: error => console.log("your error: " + error)
      })
      console.log(this.documentsArray[0])
      console.log(JSON.stringify(this.documentsArray))
    }
  }
}

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