Ionic4删除元素后刷新列表报错：无法读取location属性

嘿，我明白你碰到的问题啦！这个错误的根源在于你用delete操作符删除数组元素的方式不对——delete只会把数组对应索引的位置置为undefined，但不会改变数组的长度。这样*ngFor遍历数组的时候，还是会扫到这些undefined的空位，当尝试访问item.location时，自然就抛出错误了。

怎么解决？ #

核心思路是用数组的splice方法替代delete，splice会真正移除数组元素并自动调整数组长度，不会留下空位。另外还要注意批量删除索引时的顺序问题，避免索引偏移导致删错元素。

1. 修正批量删除的deletStations方法

把原来用delete的逻辑改成splice，并且倒序删除索引（先删大的索引，再删小的，这样前面的删除操作不会影响后面的索引位置）：

deletStations(){
  // 先把要删除的索引倒序排列，避免删除时索引偏移
  this.deletedStations.sort((a, b) => b - a).forEach(index => {
    // splice(索引, 删除数量)：真正移除数组元素
    this.wayPoints.splice(index, 1);
  });
  console.log(this.wayPoints);
  this.modalCtrl.dismiss(this.wayPoints);
  // 清空已选的删除索引，避免下次操作重复删除
  this.deletedStations = [];
}

2. 优化索引收集的delete方法（可选）

为了避免用户重复勾选同一个复选框导致重复添加索引，可以加个去重逻辑：

delete(index){
  console.log(index);
  // 检查索引是否已存在，不存在才添加
  if(!this.deletedStations.includes(index)){
    this.deletedStations.push(index);
  }
  console.log(this.deletedStations);
}

为什么原来的delete不行？ #

举个例子：假设你的wayPoints是[{location: 'A'}, {location: 'B'}, {location: 'C'}]，当你执行delete this.wayPoints[1]后，数组会变成[{location: 'A'}, undefined, {location: 'C'}]——数组长度还是3，但中间多了个undefined。*ngFor会遍历每一个位置，当遍历到第二个元素时，item是undefined，访问item.location自然就报错了。

而用splice删除索引1后，数组会变成[{location: 'A'}, {location: 'C'}]，长度变为2，没有空位，*ngFor遍历的时候就不会碰到undefined了。

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