登录后无法跳转至目标页面，提示‘che is not a function’问题排查

核心问题分析 #

• 控制台报错“che is not a function”：che并非数组类型，无法调用find方法。Firebase Realtime Database的GET请求若返回单个对象（而非数组），就会触发该错误。
• 网络请求200但跳转逻辑未执行：HTTP请求参数传递错误，导致后端返回数据不符合预期，无法匹配登录信息；同时代码存在语法错误，中断了逻辑执行。

具体修复步骤 #

1. 修正HTTP请求参数传递错误 #

Angular的HttpClient.get()第二个参数是请求配置对象，不是直接传递参数。需将id拼接到URL末尾，或作为查询参数传递：

// 修改getlogin和getdatas方法
getlogin(id: any) {
  // 方式1：将id拼接到基础URL后
  return this.http.get(`${this.urls}/${id}`);
  // 方式2：作为查询参数传递
  // return this.http.get(this.urls, { params: { id: id.toString() } });
}

getdatas(id: any) {
  return this.http.get(`${this.urls}/${id}`);
}

2. 确保返回数据为数组类型 #

若Firebase返回的是键值对结构的对象，需先转换为数组，否则find方法无法生效：

this.admincreation.getdatas(id).subscribe((response: any) => {
  // 将Firebase返回的对象转换为数组
  const che = Object.values(response);
  
  const adminl = che.find((b: any) => {
    return b.loginemail === this.Login.value.loginemail && b.loginpassword === this.Login.value.loginpassword;
  });
  // 后续逻辑...
});

3. 修复代码中的语法错误 #

• 移除订阅回调中多余的嵌套大括号
• 修正Swal.fire中的反引号错误（如无效的succesyour texts和多余代码标记）

修正后的loginsubmit方法：

loginsubmit(id: any) {
  console.log("button works");
  this.admincreation.getdatas(id).subscribe((response: any) => {
    const che = Object.values(response);
    const adminl = che.find((b: any) => {
      return b.loginemail === this.Login.value.loginemail && b.loginpassword === this.Login.value.loginpassword;
    });
    if (adminl) {
      Swal.fire('Success', 'Admin logged in successfully', 'success');
      this.Login.reset();
      this.route.navigate(['/superadmin']);
    } else {           
      this.userLogin(id);         
    }       
  });   
}

修正后的userLogin方法：

userLogin(id: any) {
  this.sign.getlogin(id).subscribe((response: any) => {
    const res = Object.values(response);
    const user = res.find((b: any) => {
      return b.loginemail === this.Login.value.loginemail && b.loginpassword === this.Login.value.loginpassword;
    });
    if (user){
      Swal.fire({
        icon:'success',
        title:'Success',
        text:'Login Successfully',
      });
      this.route.navigate(['/generalusers']);
      this.dialog.open(UseraccesdelogComponent, {
        width:'800px',
        height:'600px',
      });
      this.Login.reset(); 
    }
  });
}

4. 验证路由配置 #

确认/superadmin和/generalusers已在路由模块中正确配置，且当前组件已注入Router服务。

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