Angular注入PostService到组件后数据显示undefined问题求助

你的问题主要出在三个核心点：未触发HTTP请求、异步操作时机错误、服务实例重复创建，下面逐个解决：

1. 未调用服务的请求方法，HTTP请求根本没执行 #

你在PostService里定义了getRes()方法，但组件的ngOnInit里完全没调用它，导致items一直是初始的undefined。

2. HTTP请求是异步的，直接同步取值拿不到结果 #

就算调用了getRes()，HTTP请求是异步操作，subscribe里的赋值逻辑要等请求完成才会执行，你在ngOnInit里直接this.item = this.postService.items的时候，请求还没返回，所以还是undefined。

3. 组件重复声明服务实例，导致数据不共享 #

你的组件@Component里加了providers: [PostService]，但服务已经设置了providedIn: 'root'（根注入），这会导致组件自己创建一个新的服务实例，和你预期的根实例不是同一个，就算根实例的items有值，组件里的实例还是空的。

修改后的代码 #

第一步：重构PostService（推荐返回Observable，让组件处理订阅） #

把服务里的subscribe去掉，改成返回Observable，这样组件可以灵活处理异步数据，也符合Angular的最佳实践：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { PostUser } from '../interface/postUser';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root',
})
export class PostService {
  constructor(private http: HttpClient) {}

  base_uri = `https://reqres.in/api/users`;
  user = {
    id: 1,
    email: 'george.bluth@reqres.in',
    first_name: 'George',
    last_name: 'Bluth',
    avatar: 'https://reqres.in/img/faces/1-image.jpg',
  };

  // 移除无用的ngOnInit，服务没有这个生命周期钩子
  // ngOnInit(): void {}

  getRes(): Observable<PostUser> {
    // 返回Observable，让组件订阅
    return this.http.post<PostUser>(this.base_uri, this.user);
  }
}

第二步：修改PostComponent #

移除providers数组，调用服务的getRes()并订阅，在回调里赋值：

import { Component, OnInit } from '@angular/core';
import { PostService } from 'src/app/services/post.service';
import { PostUser } from '../interface/postUser';

@Component({
  selector: 'app-post',
  templateUrl: './post.component.html',
  styleUrls: ['./post.component.scss'],
  // 移除这行，避免重复创建服务实例
  // providers: [PostService],
})
export class PostComponent implements OnInit {
  item: PostUser | undefined;

  constructor(private postService: PostService) {}

  ngOnInit(): void {
    // 调用服务的请求方法并订阅
    this.postService.getRes().subscribe((data) => {
      this.item = data;
      console.log(this.item); // 现在能拿到数据了
    });
  }
}

更简洁的方式：使用async管道（无需手动订阅） #

如果你不想手动管理订阅，可以把Observable直接暴露给模板，用async管道自动处理：

组件代码：

import { Component, OnInit } from '@angular/core';
import { PostService } from 'src/app/services/post.service';
import { Observable } from 'rxjs';
import { PostUser } from '../interface/postUser';

@Component({
  selector: 'app-post',
  templateUrl: './post.component.html',
  styleUrls: ['./post.component.scss'],
})
export class PostComponent implements OnInit {
  user$: Observable<PostUser> | undefined;

  constructor(private postService: PostService) {}

  ngOnInit(): void {
    this.user$ = this.postService.getRes();
  }
}

模板HTML（比如post.component.html）：

<div *ngIf="user$ | async as user">
  <p>姓名：{{user.first_name}} {{user.last_name}}</p>
  <p>邮箱：{{user.email}}</p>
  <img [src]="user.avatar" alt="{{user.first_name}}的头像">
</div>

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