Angular 服务 - GET 返回未定义

Question

我正在尝试使用角度服务从数据库中获取用户。在服务中执行 GET 请求时，我可以console.log(res) 并获得响应。但是，当我尝试从另一个组件中获取数据时，它总是出现undefined。请帮忙。

users.service.ts

import { Injectable } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { HttpClient, HttpClientModule } from '@angular/common/http';

@Injectable()
export class UsersService {

  constructor(
    private http: HttpClient,
    private route: ActivatedRoute
  ) { }

  users: any;

  getUsers() {
    this.http.get('http://localhost:3000/api/users').subscribe(res => {
      this.users = res;
      return this.users;
    });
  }

}

app.component.ts

import { UsersService } from './users.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
  providers: [ UsersService ]
})

constructor(
    private http: HttpClient,
    private route: ActivatedRoute,
    private usersService: UsersService
  ) {
    this.users = usersService.getUsers();
  }

当我尝试在 app.component.html 中使用它时...

<div *ngFor="let user of users"></div>

用户出现未定义

Answer 1

如果您使用您的服务来集中您的用户数据，请考虑以下事项：

import { Injectable } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { HttpClient, HttpClientModule } from '@angular/common/http';

@Injectable()
export class UsersService {

  constructor(
    private http: HttpClient,
    private route: ActivatedRoute
  ) {
     this.getUsers()
          .subscribe(data => this.users = data);
  }

  users: any;

  getUsers() {
    return this.http.get('http://localhost:3000/api/users');

  }

}

然后在你的组件中：

constructor(
    private http: HttpClient,
    private route: ActivatedRoute,
    public usersService: UsersService <------ changed to public to make it available to the template
  ) {
     // this.users = usersService.getUsers(); <------ commented out, as users is now centralized in the service
  }

在你的模板中：

<div *ngFor="let user of usersService.users"></div>

通过进行这些更改，您的 getUsers() 方法将仅在创建 UsersService 时调用（首次出现在提供程序数组中），并且您的用户数据将可供任何注入 UsersService 的组件使用。

Answer 2

您的代码的问题是您在订阅中返回。 Get 是一个异步调用 Javascript 不知道它什么时候返回。

快速修复： 在进行 REST 调用后直接获取道具。

为您服务：

this.http.get('http://localhost:3000/api/users').subscribe(res => {
      this.users = res;
    });

在您的组件中：

usersService.getUsers();
this.users = usersService.users;

Answer 3

将您的服务更改为

 getUsers() {
    return this.http.get('http://localhost:3000/api/users')
      .map((response: Response) => response.json());
  }

并在组件内使用 subscribe()，

   this.usersService.getUsers().subscribe((data) => {
      this.users = data;
    });

Answer 4

您的服务等级

import { Injectable } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { HttpClient, HttpClientModule } from '@angular/common/http';

@Injectable()
export class UsersService {

constructor(private http: HttpClient, private route: ActivatedRoute) { }

getUsers(): Observable<any> {
    return this.http.get('http://localhost:3000/api/users')
    .map(res => res.json())
    .catch(this.handleError);
   }
}

private handleError(error: Response) {
    return Observable.throw(error || 'Server Error')
}

你的组件

import { UsersService } from './users.service';

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'],
providers: [ UsersService ]
})

constructor(private http: HttpClient, private route: ActivatedRoute, private usersService: UsersService) {
    this.usersService.getUsers().subscribe(
        res => { this.users = res; },
        err => { console.log(err); }
    );
}

确保导入{ Observable }