Angular 11中接口类型数组赋值时出现TypeError: Cannot set properties of undefined错误的问题咨询

我来帮你搞定这个报错问题！

错误原因分析 #

你已经把ProvinceAllStudent初始化为空数组[]，但在CalculateProvinceStudents方法的循环里，直接通过this.ProvinceAllStudent[j]去访问数组元素——这时候数组的第j位根本还没有对应的Test对象，是undefined，自然没法给它的id和name属性赋值，所以才抛出了TypeError: Cannot set properties of undefined这个错误。

修复方案 #

这里有几种简单的修复方式，选你觉得顺手的就行：

方案1：创建对象后push到数组

这是最直观的写法，每次循环创建一个符合Test接口的对象，再添加到数组里：

CalculateProvinceStudents() {
  for(let j=0;j<5;j++) {
    const studentItem: Test = {
      id: j,
      name: 'A'
    };
    this.ProvinceAllStudent.push(studentItem);
  }
}

方案2：先初始化索引位置的对象

如果坚持要通过索引赋值，可以先给对应位置创建一个空对象（用类型断言符合Test接口），再设置属性：

CalculateProvinceStudents() {
  for(let j=0;j<5;j++) {
    this.ProvinceAllStudent[j] = {} as Test;
    this.ProvinceAllStudent[j].id = j;
    this.ProvinceAllStudent[j].name = 'A';
  }
}

方案3：用Array.from简化生成数组

想要更简洁的写法，可以用Array.from直接生成符合要求的数组：

CalculateProvinceStudents() {
  this.ProvinceAllStudent = Array.from({length:5}, (_, index) => ({
    id: index,
    name: 'A'
  } as Test));
}

不管用哪种方式，核心都是要保证数组的每个位置先存在一个Test类型的对象，再去设置它的属性，这样就不会出现undefined的问题啦。

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