Angular: 来自 observable 的普通数组

Question

我一直在重写一个 Angular 应用程序，该应用程序以前省略了对 http 请求的使用。因此，服务组件中包含大量逻辑，并且通过使用以下格式的数组来模拟 http 请求：

[{"name": "somename1", "subset1": [
  {"name": "somesubname1", "subset2": [
    {"somemetric1": 0, "somemetric2: 1, "somemetric3": 2}]}]}]

这正是某些网站上也显示的格式 api（例如 https://localhost:5001/api/values）。

我的服务是这样的：

import { Injectable } from '@angular/core'
import { Subject, Observable } from 'rxjs';
import { HttpClient } from '@angular/common/http';


@Injectable()

export class StrategyService{

    data:any

    constructor(private httpClient: HttpClient) {
    }

    getData() {
        this.data = this.httpClient.get("https://localhost:5001/api/values")
    }

如果我 console.log(this.data) 例如getData() 并在运行我的应用 "undefined" 在控制台中 return 时调用此函数。当我用

替换 getData() 的主体时

this.httpClient.get("https://localhost:5001/api/values").subscribe(data => {data = console.log(data)})

控制台按需要的格式 return 数组（并显示在第一个块中）。控制台日志记录实际上不是我所需要的，因为我需要能够访问服务组件内其他函数中的数据，这需要特定于数组的方法，例如 .find 等

我觉得这是一件简单的事情，但到目前为止我还没有成功。我试过了

import { Injectable } from '@angular/core'
import { Subject, Observable } from 'rxjs';
import { HttpClient } from '@angular/common/http';


@Injectable()

export class StrategyService{

    dat:any

    constructor(private httpClient: HttpClient) {
    }

    getData() {
        this.httpClient.get("https://localhost:5001/api/values").subscribe(data => {this.dat = data})
    }

console.log(this.dat) 仍然 returns "undefined".

Answer 1

这是每个人在使用异步代码时都会遇到的经典入门问题。研究一下 rxjs + 异步代码在 Typescript 中的工作原理。

您的问题的解决方案是检查 subscribe 块中的数据，因为在您的 api 的响应返回后。

this.httpClient.get("https://localhost:5001/api/values").subscribe(data => console.log(data))

public myFunction() {
this.httpClient.get("https://localhost:5001/api/values").subscribe(data => {
   this.data = data;
   console.log(this.data); // data is defined here
})
console.log(this.data); // data will be undefined here
}

有用资源的链接：
https://www.learnrxjs.io/
https://angular.io/guide/http

Angular: 来自 observable 的普通数组

Angular: normal array from observable

javascript

observable

angular

angular-httpclient