TypeScript/Angular 9中如何为对象数组指定下标元素添加新属性

错误原因说明 #

• 第一种使用push报错：push是数组专属方法，你取到的this.houseList[i]是对象类型，没有该方法，所以触发类型错误。
• 第二种使用splice结果不符：splice是用来直接操作数组元素的增删，你写的逻辑是在下标i的位置插入新元素，自然会导致数组长度增加，不会修改原有对象的属性。

正确实现方式 #

方式1：直接赋值（已知固定下标时最优） #

你已经明确要修改下标为1的元素，不需要遍历，直接给对象加属性即可：

this.houseList[1].parking = this.ParkingIsTrue

方式2：遍历赋值（适用于需要动态判断下标/属性的场景） #

如果你的实际场景需要遍历匹配条件再修改，循环内直接给对应对象加属性即可：

for(let i = 0; i < this.houseList.length; i++) {
   if (i === 1) {
       this.houseList[i].parking = this.ParkingIsTrue
   }
}

方式3：不可变更新（适用于React/Vue等需要响应式更新的场景） #

如果需要不修改原数组，返回新数组触发响应式更新，可以用map方法：

this.houseList = this.houseList.map((item, index) => 
  index === 1 ? {...item, parking: this.ParkingIsTrue} : item
)

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