Angular中从AuthService获取正确JSON数据并实现值对比的问题

我来帮你搞定这个问题，核心原因是你没正确处理Angular中Http请求的异步特性，而且服务里的方法也没有返回完整的接口响应。下面是具体的修复步骤：

1. 修改AuthService，返回完整的接口JSON #

你的getUsers方法目前只提取了响应里的data部分，但你需要完整的JSON结构，所以调整map操作的返回值：

import {Injectable} from '@angular/core';
import {Router} from '@angular/router';
import {BehaviorSubject} from 'rxjs/BehaviorSubject';
import {User} from './user';
import {Http, Headers, RequestOptions} from '@angular/http';
import 'rxjs/add/operator/map';
@Injectable()
export class AuthService {
  result: any;
  constructor(private router: Router, private _http: Http) {}
  getUsers() {
    // 直接返回完整的JSON响应，不再只取data字段
    return this._http.get('/api/users').map(result => result.json());
  }
}

2. 在LoginComponent中订阅Observable获取实际数据 #

Angular的Http请求返回的是Observable，这是一个异步数据流，你必须通过subscribe方法订阅它，才能触发请求并拿到真实的接口数据。不能直接打印getUsers()的返回值，因为那只是Observable的对象实例，不是实际响应。

修改login.component.ts里的onSubmit方法：

onSubmit() {
  this.authService.getUsers().subscribe(
    // 成功获取数据时的回调
    fullResponse => {
      console.log('完整接口返回:', fullResponse);
      // 在这里实现你的值对比逻辑，比如和this.temp比较
      if (fullResponse.status === this.temp) {
        // 执行你需要的操作
        console.log('状态码匹配');
      }
      // 如果要对比data数组里的用户名称
      const matchedUser = fullResponse.data.find(user => user.name === this.temp);
      if (matchedUser) {
        console.log('找到匹配的用户:', matchedUser);
      }
    },
    // 请求出错时的回调
    error => {
      console.error('请求接口失败:', error);
    }
  );
}

为什么之前会得到Observable对象？ #

• Angular的Http.get()本身就返回Observable，它代表一个待执行的异步请求，只有当你调用subscribe时，才会真正发送请求并等待响应。
• 你之前直接打印this.authService.getUsers()，得到的就是这个Observable的实例，而不是接口返回的JSON数据。

这样修改后，你就能拿到完整的接口JSON响应，然后在subscribe的成功回调里实现你的值对比逻辑了。

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