Angular-从服务中从HTTPCLIENT中获取JSON数据无法正常工作

发布于 2025-02-09 15:50:43 字数 1632 浏览 1 评论 0原文

我正在尝试使用服务以Angular获取JSON数据，并且使用get（）方法获得了使用HTTPCLIENT的数据。问题是我正在使用Promise，该功能正在返回其内部值的承诺。

我在控制台中打印了值，它正在返回：

zoneawarepromise {__zone_symbol__state：null，__zone_symbol__value：array（0）} 控件：（22）[{…}，{…}，{…}，{…}，{…}，{…}，{…}，}，}，}

这是服务代码：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable,of, interval, firstValueFrom } from 'rxjs';
import { Component, OnInit,Input } from '@angular/core';
import { FormGroup, FormControl, FormArray, FormBuilder, Validators  } from '@angular/forms'
import {STEPPER_GLOBAL_OPTIONS} from '@angular/cdk/stepper';
import { map } from 'rxjs/operators';


@Injectable({
  providedIn: 'root'
})
export class DataService {

  controls:any=[]

  constructor(private http: HttpClient) {
    this.controls=this.getControlsData()
  }

  public async getControlsData():Promise<any> {

    console.log(firstValueFrom( (this.http.get("../assets/json/controlsData.json"))))
    return await firstValueFrom( (this.http.get("../assets/json/controlsData.json")))
  }

  public addControl(): Observable<any> {
    return this.http.get("../assets/json/controlsData.json");
  }



}

component ：component ：

ngOnInit() {

    this.data=this.DataService.getControlsData()

}

原文

I'm trying to get JSON data in Angular using a service and I'm getting data with HttpClient using the get() method.
The problem is I'm using Promise and the function is returning a promise with the value inside it.

I printed the value in the console and it's returning:

ZoneAwarePromise {__zone_symbol__state: null, __zone_symbol__value: Array(0)}
controls: (22) [{…}, {…}, {…}, {…}, {…}, {…}, {…},}

Here is the service code:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable,of, interval, firstValueFrom } from 'rxjs';
import { Component, OnInit,Input } from '@angular/core';
import { FormGroup, FormControl, FormArray, FormBuilder, Validators  } from '@angular/forms'
import {STEPPER_GLOBAL_OPTIONS} from '@angular/cdk/stepper';
import { map } from 'rxjs/operators';


@Injectable({
  providedIn: 'root'
})
export class DataService {

  controls:any=[]

  constructor(private http: HttpClient) {
    this.controls=this.getControlsData()
  }

  public async getControlsData():Promise<any> {

    console.log(firstValueFrom( (this.http.get("../assets/json/controlsData.json"))))
    return await firstValueFrom( (this.http.get("../assets/json/controlsData.json")))
  }

  public addControl(): Observable<any> {
    return this.http.get("../assets/json/controlsData.json");
  }



}

Component:

ngOnInit() {

    this.data=this.DataService.getControlsData()

}

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

笑红尘 2025-02-16 15:50:43

使ngoninit（）方法异步。

async ngOnInit() {
   this.data = await this.DataService.getControlsData();
}

或通过Promise.then（）在回调期间分配值。

ngOnInit() {
  this.DataService.getControlsData().then((response: any[]) => {
    this.data = response;
  });
}

或建议不使用Promise，而是返回可观察的，因此您的组件转换为 subscribe 可观察到的（如果您能够，请取决于您的用例选择不要坚持Promise）。

Either make the ngOnInit() method asynchronous.

async ngOnInit() {
   this.data = await this.DataService.getControlsData();
}

Or assign the value during callback via Promise.then().

ngOnInit() {
  this.DataService.getControlsData().then((response: any[]) => {
    this.data = response;
  });
}

Or would suggest not to use Promise but return an observable, so your component to subscribe the observable (depend on your use case if you able to select not to stick with Promise).

回复收藏 0 原文

~没有更多了~