Angular中使用Promise时*ngFor循环报错：无法读取push属性

问题描述 #

编写了如下handleFileInput函数：

handleFileInput(file: any) {  
      let promise = new Promise((resolve, reject) => {
      this.uploadFileDetails.push({ filename:this.FileName,filetype:this.FileType});
      ...
       resolve(data.Location);
      return promise;
}

使用<div *ngFor="let fileDetails of uploadFileDetails"></div>循环遍历this.uploadFileDetails时，出现错误：

ERROR TypeError: Cannot read properties of undefined (reading 'push')

移除该循环后，能正常看到值已被正确保存。

错误原因 #

核心问题是this.uploadFileDetails未被初始化为数组。Angular模板会在组件初始化阶段就尝试渲染*ngFor，此时如果uploadFileDetails还是undefined，模板遍历操作会触发读取push方法的报错；而移除循环后，组件后续执行handleFileInput时可能通过其他逻辑给数组赋值了，所以能看到保存的值。

解决方案 #

1. 提前初始化数组
   在组件类中声明uploadFileDetails时直接初始化为空数组，确保模板渲染时数组已存在：

// 组件类中声明
uploadFileDetails: { filename: string; filetype: string }[] = [];

也可以在构造函数或ngOnInit钩子中初始化：

constructor() {
  this.uploadFileDetails = [];
}

// 或者在ngOnInit中
ngOnInit(): void {
  this.uploadFileDetails = [];
}

2. 修正handleFileInput的Promise返回逻辑
   原代码中return promise写在Promise的回调函数内部，导致函数无法正确返回Promise，需要将return移到外部：

handleFileInput(file: any): Promise<string> {  
  return new Promise((resolve, reject) => {
    this.uploadFileDetails.push({ filename: this.FileName, filetype: this.FileType });
    // ... 你的上传逻辑代码
    resolve(data.Location);
  });
}

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