Angular 5删除项目后重载列表报错：_this.pageProjects.indexOf不是函数

嘿，这个问题我之前做Angular项目时也碰到过，咱们一步步拆解解决：

错误根源 #

你看到的TypeError: _this.pageProjects.indexOf is not a function，本质就是**pageProjects根本不是数组**——indexOf()是数组专属的方法，要是它是对象、null或者undefined，肯定会触发这个报错。

大概率是这两种情况导致的：

• 初始化pageProjects时没把它设成数组，比如写成了pageProjects: any;而不是pageProjects: any[] = [];
• 从ProjetService获取数据时，直接把整个响应对象（比如分页接口返回的{ list: [...], total: 5 }）赋值给了pageProjects，而不是提取里面的数组部分

具体解决步骤 #

1. 先把pageProjects初始化为数组 #

在组件类里声明变量时，明确给它初始化为空数组：

// 组件类内部
pageProjects: Projet[] = []; // 用你的项目实体类型代替Projet，或者用any[]也可以

2. 修正服务数据的处理逻辑 #

如果你的接口返回的是带包装的响应（比如分页数据），记得只把里面的数组部分赋值给pageProjects。举个例子：

// 错误示例：直接把整个响应赋值
this.projetService.getProjects().subscribe(res => {
  this.pageProjects = res; // 这里res可能是包含数组的对象，不是纯数组
});

// 正确示例：提取数组字段（比如data/list，具体看你接口返回的结构）
this.projetService.getProjects().subscribe(res => {
  this.pageProjects = res.data; // 假设接口返回的数组存在res.data字段中
});

3. 调整删除逻辑 #

假设你现在的删除逻辑是这样的（报错的代码段）：

deleteProject(targetProject: Projet) {
  this.projetService.deleteProject(targetProject.id).subscribe(() => {
    // 报错的行：因为pageProjects不是数组，indexOf调用失败
    const projectIndex = this.pageProjects.indexOf(targetProject);
    if (projectIndex !== -1) {
      this.pageProjects.splice(projectIndex, 1);
    }
  });
}

在确保pageProjects是数组之后，这段代码就能正常工作了。如果你更倾向于删除后重新请求列表（避免本地数据和后端不一致），也可以改成这样：

deleteProject(targetProject: Projet) {
  this.projetService.deleteProject(targetProject.id).subscribe(() => {
    // 删除成功后重新加载项目列表，自动完成重载
    this.loadProjectList(); // 这里loadProjectList是你封装的获取列表的方法
  });
}

额外排查小技巧 #

• 可以在报错的代码行前加console.log(this.pageProjects)，看看它的实际类型和结构，确认是不是数组
• 如果是异步加载数据，记得在模板里用*ngIf="pageProjects"做判断，避免数据还没返回就执行删除相关逻辑

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