Angular技术问询：类型‘HttpEvent<any>’不存在‘find’属性如何解决？

问题根源 #

1. 类型推断错误：HttpClient.get 默认返回的是 Observable<HttpEvent<T>> 或 Observable<T>，但你没有明确指定返回类型为数组，TypeScript 无法识别 result 是数组，所以找不到 find 方法（find 是数组原型方法）。
2. GET 请求参数传递错误：你把表单值直接作为 get 的第二个参数，这是错误的 —— GET 请求不支持请求体，必须通过 params 传递 URL 查询参数。
3. 登录逻辑判断错误：你用 this.signUpData 判断登录成功，这和实际查询到的用户数据无关，逻辑完全错误。

分步解决方案 #

1. 修正 GET 请求参数传递

使用 HttpParams 将表单值转为 URL 查询参数：

import { HttpParams } from '@angular/common/http';

// 在你的组件方法中
const params = new HttpParams({ fromObject: this.signInForm.value });

2. 明确指定返回类型为数组

将 get<any> 改为 get<any[]>，告诉 TypeScript 返回的是数组类型，这样就能正常调用 find：

this._http.get<any[]>('http://localhost:3000/signUpData', { params })

3. 修复登录判断逻辑

用查询到的 userData 判断是否登录成功，而不是无关的 this.signUpData：

if (userData) {
  alert('Login Successfully!');
  this.router.navigate(['dashboard']);
} else {
  alert('User not found!');
}

4. （可选）添加错误处理

避免请求失败时无反馈，在 subscribe 中添加错误回调：

.subscribe({
  next: (result) => { /* 成功逻辑 */ },
  error: (err) => {
    alert('登录请求失败，请稍后重试');
    console.error(err);
  }
});

完整修正后的代码 #

import { HttpParams } from '@angular/common/http';
import { FormGroup } from '@angular/forms';

// ...

logIn(signInForm: FormGroup) {
  console.log('Login', signInForm);
  const params = new HttpParams({ fromObject: this.signInForm.value });
  
  this._http.get<any[]>('http://localhost:3000/signUpData', { params }).subscribe({
    next: (result) => {
      if (this.id === undefined) { return; }
      
      // 注意：原代码中的_toast提示是"Registered Successfully!"，应该改为登录成功的提示
      this._toast.success('Login Successfully!', 'Success');
      
      const userData = result.find((loginData: any) => {
        return loginData.email === this.signInForm.value.email && loginData.password === this.signInForm.value.password;
      });
      
      if (userData) {
        alert('Login Successfully!');
        this.router.navigate(['dashboard']);
      } else {
        alert('User not found!');
      }
    },
    error: (err) => {
      alert('登录失败，请稍后重试');
      console.error(err);
    }
  });
}

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