Question

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

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

这正是某些Web 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”。当我用

替换getData（）的主体时

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

控制台确实按期望的格式返回数组（并显示在第一个块中）。实际上，控制台日志记录并不是我所需要的，因为我需要能够访问服务组件内部其他函数中的数据，这些函数需要特定于数组的方法，例如.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）仍返回“未定义”。

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

角度：可观察的法线阵列

1 个答案: