在组件中保留 HttpRequest 值

Question

我有 Http 请求值的问题。 我向 Express API rest 发出 Http 请求，我想查看整个组件的值。 我可以在 observable 上获得数据，但不能在我的组件的其他功能中获得数据。 你能解释一下为什么吗？

import { Component, OnInit, Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';


export class UserModel {
  constructor (
    public id: string,
    public name: string,
    public type: string
  ) {}
}


@Injectable()
export class AskingService {

  BASE_URL = 'http://localhost:4201/';

  constructor(private http: HttpClient) { }

    // Get users from EXPRESS API REST
    getUserFromBdd() {
       return  this.http.get<UserModel[]>(this.BASE_URL + 'api/fields');
      }
}

@Component({
  selector: 'app-asking-problem',
  template: `

`
})
export class AskingProblemComponent implements OnInit {

  constructor( private service: AskingService) { }

users;

  ngOnInit() {
    // subscribing to the service
this.service.getUserFromBdd().subscribe(data => {this.users = data, console.log('this.users =', this.users); });
// console return data


console.log('this.users =', this.users);
// console return undefined

  }

}

Answer 1

这很简单。 订阅内部调用的操作将在外部调用“console.log('this.users =', this.users)”之后执行，因为一个是同步的，另一个是异步的。

您的对象用户将具有正确的值，但在 http 解析并发出将由订阅函数接收的值之后。 知道了？

来自Observables的Angular 指南：

可观察对象

Observables 支持在应用程序中的发布者和订阅者之间传递消息。 Observables 在事件处理、异步编程和处理多个值方面提供了优于其他技术的显着优势。