在angular服务中如何从异步调用中获取数据？
在Angular服务中，可以通过使用Observables来从异步调用中获取数据。Observables是一种用于处理异步数据流的强大工具，它可以让我们更方便地处理异步操作。
要从异步调用中获取数据，可以按照以下步骤进行操作：
- 导入必要的依赖：
- 导入必要的依赖：
- 在服务中创建一个方法，该方法将返回一个Observable对象，该对象可以在异步调用完成后传递数据：
- 在服务中创建一个方法，该方法将返回一个Observable对象，该对象可以在异步调用完成后传递数据：
- 在组件中使用该服务方法来获取数据：
- 在组件中使用该服务方法来获取数据：
在上述代码中，我们首先在服务中创建了一个名为getData()的方法，该方法返回一个Observable对象，该对象通过使用HttpClient来发起异步调用。在组件中，我们注入了该服务，并在ngOnInit()生命周期钩子中调用getData()方法。通过调用subscribe()方法，我们可以订阅Observable对象，并在异步调用完成后获取数据。在订阅的回调函数中，我们将获取到的数据赋值给组件中的变量data，以便在模板中使用。
需要注意的是，上述代码中的api/data是一个示例URL，你需要根据实际情况替换为你的异步调用的URL。
推荐的腾讯云相关产品：腾讯云云函数（Serverless 云函数计算），产品介绍链接地址：https://cloud.tencent.com/product/scf
相关·内容
2回答
在角5中构建数据服务
angular、service
我正在尝试构建一个在角5中的数据服务，它从平面文件中读取数据并将其传递给组件以供显示。该文件位于相对于数据服务的./ data - file目录中。
问题是，我很难验证服务是否正在向组件提供数据。为了保持简单，我尝试在组件的构造函数中放置一个console.log(数据)；但是到目前为止，我还无法确定发生了什么。
以下是我的数据服务代码：
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observabl
浏览 0提问于2018-02-01得票数 0
回答已采纳
1回答
在同步的两个组件之间交换数据和事件
angular、typescript、angular7
我是新来的，用角7开始一些代码，我有个问题。
我创建了两个组件和一个服务。当在组件searchbar中单击按钮时，服务将检索数据。我想在search-res视图中显示它。服务有要从searchbar组件获取的数据。
这是服务代码：
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http'
import { Observable } from 'rxjs';
@Injectable({
providedIn: &#
浏览 0提问于2019-01-25得票数 0
2回答
我不能从Hacker新闻API中得到故事
angular、typescript
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { map, mergeMap } from 'rxjs/operators';
import { forkJoin, from, Observable } from 'rxjs';
const baseUrl = 'https://hacker-news.firebaseio.com/v0/';
const t
浏览 6提问于2022-01-29得票数 0
回答已采纳
2回答
在Angular2中刷新页面时如何维护令牌？
angular、service、token、refresh
我有一个主页，其中有人插入一个令牌，然后转到主页，然后通过一个按钮转到第二个页面。我使用一个服务在三个组件之间传递令牌，并使用该令牌调用API请求。当我在主页或第二页刷新页面时，令牌就会丢失。我该怎么办？ 主页的组成部分 export class HomepageComponent implements OnInit {
token:any;
a:string;
settings: any;
constructor (public parkingService: ParkingService, public root:Router, public dataServi
浏览 11提问于2020-06-19得票数 0
2回答
如何在初始化组件时使用angular 2设置公共属性
angular、angular2-services
我有一个服务，当注入到组件中时，它会按预期返回数据。但是，当我订阅服务方法并在组件初始化时将响应分配给公共变量时。变量仍未定义
这是我的服务
import {Injectable} from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { Headers, Http, RequestOptions, Response } from '@angular/http';
// Statics
import 'rxjs/add/observa
浏览 2提问于2016-11-05得票数 0
1回答
如何设计http请求服务？我做错了什么？
angular、typescript、rxjs、httprequest、httpclient
我想问的是，对于我想要实现的东西，任何人都认为是最好的实现。
我希望在组件初始化时从HTTP请求中获取数据，并同时处理这些数据。数据将来自实现HttpClient.get()请求的服务。
组件：
import {AfterViewInit, Component, OnInit} from '@angular/core';
import {HttpHandleService} from '../services/http-handle.service';
@Component({
selector: 'app-http-displayer'
浏览 1提问于2019-03-03得票数 0
1回答
从服务中从HttpClient获取JSON数据的角度不能正常工作
angular、typescript、async-await、angular-promise、angular-httpclient
我正在尝试使用服务获取JSON数据的角度，并使用HttpClient使用get()方法获取数据。问题是，我使用的是诺言，函数返回的是一个包含它的值的承诺。
我在控制台中打印了值，它正在返回：
ZoneAwarePromise {__zone_symbol__state: null，__zone_symbol__value: Array(0)}控件：(22) [{…]}，{…}，{…}，{…}，{…}，{…}，{…}，}
以下是服务代码：
import { Injectable } from '@angular/core';
import { HttpClient
浏览 8提问于2022-06-23得票数 0
回答已采纳
1回答
如何更新组件数据w角6服务
angular、observable
我有一个角6数据服务，它设置了一个可观察的、至少与一个组件共享的数据服务。
我试着遵循这种特性的设计模式。
问题是，虽然我的组件似乎接收到默认值，但它从不更新数据。
数据服务如下所示：
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable, BehaviorSubject, Subscription, fromEvent } from 'rxjs';
@Injectabl
浏览 0提问于2018-09-21得票数 1
回答已采纳
2回答
如何在使用可观察到的组件中发生更改后，再次从API中获取数据？
javascript、angular、typescript、observable、angular6
我有一个DataServive，它从API中获取内容：
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { map, catchError, retry } from 'rxjs/operators';
import { environment } from 'src/environments/env
浏览 1提问于2018-09-25得票数 0
回答已采纳
2回答
add data to ReplaySubject<ImpiantoModel[]>但不使用next()覆盖
angular、rxjs、httpclient、observable、angular-services
我是angular的新手，我有一个问题。我正在使用ReplaySubject在组件之间共享数据，我得到了它，但是我如何更新我的数据？
我想每分钟添加一个来自http het的值，但是使用Next()方法我会覆盖所有的数据。
下面是我的文件：
data-service.service.ts
import {Injectable, OnInit} from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { ReplaySubject } from 'rxj
浏览 7提问于2017-12-30得票数 2
回答已采纳
1回答
在Angular5中将对象从一个组件移动到同级组件
javascript、arrays、angular、components、javascript-objects
我正在开发一个列表应用程序，它将一个对象从一个组件传输到一个相同的同级组件。我还想在每次移动时将moves属性减少1。我在实际将所选项目推入同级数组时遇到了问题。
这是我的数据样本。
import { player } from "./player";
export const PLAYERS: player[] = [
{
index: 1,
photo: "../../assets/images/lonzo.jpeg",
name: "Lonzo Ball",
position: "G",
浏览 0提问于2018-03-06得票数 0
1回答
如何调用另一个方法组件
angular、typescript、rxjs、behaviorsubject
我希望在learningHour中的setStatusofuser()方法之后呈现工作负载方法，如何做，请有人帮忙。
这是我的confirmation.ts组件
import { Component, Inject, OnInit } from '@angular/core';
import { MatDialog, MAT_DIALOG_DATA } from '@angular/material/dialog';
import { courses } from '../models/courses';
import { CoursesServ
浏览 4提问于2022-01-07得票数 -1
1回答
角DataService不能解析参数
angular、angular4-httpclient
我使用的是角v.4.2.4。当我试图从API中获取数据时，我会得到一个似乎找不到的错误。API在我自己的机器上，并像在postman中一样返回数据。我得到的错误是：
Can't resolve all parameters for DataService
以下是我认为有助于发现错误的文件：
app.module
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClien
浏览 1提问于2018-05-28得票数 0
回答已采纳
1回答
无法理解错误: TypeError:无法读取未定义的属性“订阅”
javascript、angular、typescript、rxjs、integration-testing
我编写了一个实现来从API调用中获取数据。但是，在测试功能时，甚至在编写任何有意义的测试用例之前，我都会得到以下错误：
TypeError: Cannot read property 'subscribe' of undefined
at DataComponent.ngOnInit (http://localhost:9876/_karma_webpack_/webpack:/src/app/dashboard/job/job.component.ts:48:10)
at callHook (http://localhost:9876/_karma_webpa
浏览 2提问于2020-11-25得票数 0
2回答
角:在“this.id”函数中声明的Access OnInit
javascript、angular、class、parameters、angular-ui-router
更新1
在我阅读了Alexanders的建议之后，我更新了代码并没有得到任何错误信息。但是Angular不再向服务器发出请求了，这让我很好奇。而且pageTitle也不更新。
appointmentDetail.component.html
{{appointmentDetail.time}}
appointmentDetail.component.ts
import { Component, OnInit, OnDestroy, Injectable } from '@angular/core';
import { ActivatedRoute, ParamMap } fro
浏览 0提问于2018-08-25得票数 0
回答已采纳
1回答
订阅返回可观测单元测试中的测试错误块
angular、unit-testing、jasmine、karma-jasmine、angular7
我想测试一种返回可观察的方法。我能够测试这个方法，但是我无法覆盖错误返回部分
home.component.ts
import { Data } from './../model/data.model';
import { DataService } from './../services/data.service';
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-home',
templateUrl:
浏览 0提问于2019-03-14得票数 0
2回答
在角度分量之间共享使用HttpClient检索的数据
angular、typescript、rxjs、observable、angular-services
我希望创建一个服务方法，该方法在第一次执行时将从URL中获取数据集，缓存数据集，然后与随后调用服务方法的组件共享数据集的同一个实例。
我已经开始创造两种解决方案。这两种解决方案的问题是，在加载角应用程序后的第一毫秒内，它们多次从URL中获取数据集，并/或向控制台抛出一些错误消息，但在两个组件之间进行第一次或第二次导航之后，数据似乎被正确地共享，并且不再有返回URL的往返。
方法1
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http'
浏览 7提问于2020-06-21得票数 0
回答已采纳
2回答
服务角度5中未定义的数组
javascript、html、angular
我有一个问题，this.http.get("item.json");初始化返回一个空的array.The DataService服务，数组已满。
我使用的是Angular 5
{
"name": "stock",
"version": "1.0.0",
"description": "Angular 5",
"scripts": {
"dev": "webpack-dev-server --hot
浏览 4提问于2018-04-04得票数 0
1回答
HTTP请求从角2服务返回空
angularjs、angular、angular-services、angular-http
我打电话给一个服务部门的数据。我必须传入一个具有属性的对象来检索数据。据我所知，我正在正确地传递它，并且在控制台中没有收到任何错误，但是我分配给数据的对象是空的。我包括我的服务和组件，我要输出数据。
我使用相同的“有效载荷”值从Angular1应用程序调用完全相同的端点，并获得返回的数据对象。我肯定我错过了一些简单的东西。仍然习惯于角质2。
服务
import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
import { Observab
浏览 0提问于2017-03-09得票数 0
回答已采纳
2回答
角5数据请求
angular、httpclient、angular5
我已经构建了一个具有角5和Java的应用程序。
目前，我遇到的问题是无法将接收到的数据从我的数据服务中提取出来。
这是我的数据服务：
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http'
import 'rxjs/add/operator/toPromise';
import { Observable } from 'rxjs/Observable';
@Injectable()
export
浏览 0提问于2018-04-10得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频活动推荐
腾讯云开发者
