Angular:使用forkJoin时主体行为不同
Angular是一种流行的前端开发框架，它使用TypeScript编写，被广泛用于构建现代化的Web应用程序。在Angular中，forkJoin是一个操作符，用于同时订阅多个Observable并等待它们都完成后再进行后续的操作。
当使用forkJoin时，主体行为是不同的，具体取决于传递给forkJoin的Observables。有两种可能的情况：
- 如果传递给forkJoin的Observables中有一个或多个发出错误（error）的情况，主体行为将是发出错误（error）。这意味着当其中任何一个Observable发出错误时，forkJoin将立即终止并将该错误传递给订阅者。
- 如果传递给forkJoin的Observables都成功发出了值（next），主体行为将是发出这些值的数组。订阅者将收到一个包含所有Observables发出值的数组，并且这些值的顺序与传递给forkJoin的Observables的顺序相对应。
在Angular中，forkJoin常用于在并行发出的多个HTTP请求都成功返回后执行其他操作，例如合并数据、处理响应等。
以下是一些关于forkJoin的优势和应用场景：
优势：
- 提供了一种方便的方式来处理多个并行的Observables。
- 简化了对多个HTTP请求的管理和处理。
应用场景：
- 在一个页面或组件中需要同时发起多个HTTP请求，并在它们都成功返回后进行后续处理。
- 需要合并来自多个数据源的数据，并在数据都可用时进行操作。
- 需要在某些操作完成前等待多个异步任务完成。
腾讯云提供的与Angular相关的产品是腾讯云静态网站托管（Static Website Hosting）。该产品提供了一种简单易用的方式来托管Angular应用程序的静态文件。您可以通过配置域名、上传文件等方式将Angular应用程序部署到腾讯云上，并享受腾讯云的高性能、高可靠性和低成本优势。
更多关于腾讯云静态网站托管的信息，请访问：腾讯云静态网站托管
以上是关于Angular中使用forkJoin时主体行为不同的答案。
相关·内容
我调用四个不同的REST端点，我想将所有这些结果合并到单个JSON中，并显示在角Mat表中。我试图推入一个数组，但它创建了嵌套的JSON对象，而没有在表中显示任何内容。请在下面找到我的代码：
post.component.ts
import { Component, OnInit, ViewChild, ChangeDetectorRef } from '@angular/core';
import { animate, state, style, transition, trigger } from '@angular/animations';
import
浏览 3提问于2022-04-22得票数 1
我正在做一个网站，使用spring作为我的后端，angular和html作为前端。
我的MySQL数据库中有两个表(services/ offers )(offers表有一个serviceName外键，它同时也是服务表的主键)。
我有一个angular组件，它调用两个数据库表，并将它们放入两个不同的数组中。
我试图在angular中创建一个新的数组，其中包含offers数组中每个serviceName的出现次数，但是当我尝试记录(console.log)这个新列表时，它有时是空的，有时甚至不会出现。
下面是angular组件：
import { Component, OnInit } from
浏览 2提问于2019-05-25得票数 0
1回答
下面的方法，使用forkJoin运行良好，但是。。。
unifiedSearch : Function = (query: string) : Observable<UnifiedSearch> => {
return forkJoin(this.searchService.gitSearch(query), this.codeSearchService.codeSearch(query))
.map( (response : [GitSearch, GitCodeSearch]) => {
return {
'repositorie
浏览 0提问于2019-03-19得票数 1
我在做一个6角形的项目。
运行ng lint会发出以下警告：
“不推荐forkJoin:不推荐resultSelector，转而使用管道映射”
forkJoin(...observables).subscribe(
有什么想法吗？似乎找不到任何关于这种贬义的信息。
我刚刚用角CLI: 6.1.5生成了一个全新的角应用程序"ng新forkApp“
来源：
import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
浏览 0提问于2018-09-24得票数 82
回答已采纳
2回答
有没有像q.all这样的东西来解决angular2中所有的http api请求？
在angular1中，我可以这样做：
var promises = [api.getA(),api.getB()];
$q.all(promises).then(function(response){
// response[0] --> A
// response[1] --> B
})
在angular2中，http模块返回Observable，
api.getA().subscribe(A => {A})
api.getB().subscribe(B => {B}
浏览 3提问于2016-05-12得票数 24
回答已采纳
我正在尝试设置一种简单的方法来比较当前用户名和Angular服务中配置文件的用户名。
显然，必须先解析配置文件用户名和用户的用户名，然后才能对它们进行比较，那么我如何返回一个布尔型可观察值，以便在组件中订阅此比较？
这就是我的观点：
public profileId = new Subject<string>; // Observable string source updated from a profile.component (when the URL displays the profile's username)
public profileId$ = this.
浏览 1提问于2017-10-22得票数 11
回答已采纳
1回答
我有一个用angular 4编写的用于添加/更新对象的angular 4表单。该表单有几个下拉列表，这些选项来自API调用。当更新对象时，在ngInit上，我通过ID获取现有对象，还获得下拉列表的选项。但是下拉列表并不总是加载预选的选项。我知道原因是因为所有的API调用都是异步的，当对象数据在加载下拉列表选项之前获取时，这些选项将不会被选中。
处理这种情况的最好方法是什么？
浏览 1提问于2017-11-30得票数 0
我想在angular服务中使用httpClient从远程源获取几个不同ProductIds的数据。我想在服务中组合数据，然后返回它。 只需使用一个productId，就可以很好地工作： getData(productId: string): Observable<any> {
const path = this.serverUrl + '?' + 'productId=' + productId;
return this.httpClient.get(path);
} 但是如何遍历产品Ids数组，然后返回组合结果呢？ getData(pro
浏览 27提问于2019-03-08得票数 0
回答已采纳
2回答
我似乎找不出一种方法来捕获/处理forkJoin内部的错误，同时尝试进行路由解析。
我已经为帐户页面创建了一个路由解析器，它应该在路由之前返回2个请求。下面是我无法理解的部分:如果用户没有订阅，那么404将从服务器返回。我想处理这一点，如果发生这种情况，用户应该被路由到一个不同的页面，他可以在那里进行订阅。
import { Injectable } from '@angular/core';
import { Resolve, ActivatedRouteSnapshot } from '@angular/router';
import { Observabl
浏览 1提问于2017-03-13得票数 4
回答已采纳
我将forkJoin导入为
import 'rxjs/add/observable/forkJoin';
但我的控制台中仍然有一个错误：
__WEBPACK_IMPORTED_MODULE_2_rxjs_Observable__.a.forkJoin is not a function
我在Angular CLI编译器(使用ng serve)中没有得到这个错误，VS代码也没有抱怨。现在有没有不同的运行forkJoin的方法？我正在使用RxJS 5.5.*运行最新版本的Angular (5.*)。
根据请求，它被这样调用：
Observable.forkJoin(
thi
浏览 6提问于2018-01-17得票数 2
回答已采纳
在我的Observable上完成功能的forEach循环后，我需要重新加载浏览器。 我使用的是Angular 7，我正在做一次forEach迭代，我想在循环结束时重新加载浏览器。 async validateMetric(metrics: Metric[]) {
metrics.forEach(metric => {
this.metricsService.editMetric(metric)
.subscribe(metricUpdated => {
return metricUpdated;
})
});
aw
浏览 42提问于2019-05-21得票数 0
回答已采纳
我正在尝试通过迁移一个目前用Angular1/AngularJS编写的应用程序来提高我对Angular2的了解。
有一个特性特别让我难倒。我正在尝试复制一个功能，其中调用函数等待继续，直到它调用的函数完成了promises循环。在AngularJS中，我调用的函数基本上如下所示：
this.processStuff = function( inputarray, parentnodeid ) {
var promises = [];
var _self = this;
angular.forEach( inputarray , function( nodeid ) {
浏览 23提问于2016-02-23得票数 33
回答已采纳
我想准备一些HTTP请求，在做完一些事情之后，我想执行它们。例如：
this.requests.push(this.serviceExample.get())
..... // some things
this.request.executeRequests()
我在网上找了很久，但什么也没找到。我不知道是否可以使用Angular。
浏览 10提问于2020-02-10得票数 0
回答已采纳
2回答
我正在努力解决我认为是Angular 6的异步问题。下面是一个例子。我只想进入“if”并显示控制台日志，但这从未发生过。getListOne和getListTwo调用了一个可观察的API，并且在我的html上显示得很好。 ListOne = [];
ListTwo = [];
ngOninit() {
this.getListOne();
this.getListTwo();
if (this.ListTwo.length > 0 ) {
console.log("well done at least !";
浏览 18提问于2018-12-27得票数 0
我正在尝试调用Angular中ngOnInit上的两个服务，我有以下代码：
.ts文件
ngOnInit() {
// Calling 1st service
this.serviceOne.getAllServiceOneData().subscribe(
data => (
this.serviceOneData = data,
console.log('successfully loaded all service one data')
),
error => this.err
浏览 6提问于2019-08-07得票数 3
问题是，当我对Spring Boot后端运行两个不同的HttpClient请求时，两个请求都得到了相同的结果(我得到的结果是第一个请求)。这种情况发生在大约30%的情况下：
//request 1 with url_1= "http://localhost:9099/back/cars/list"
this.http.get(url_1, httpOptions).subscribe(
data => {
console.log(data);
}
);
//request 2 with url_2= "http://localhost:9099/
浏览 97提问于2021-06-04得票数 1
我试着用angular做一个"BBoard“。 <div *ngFor="let category of categories">
{{ category.name }}
<div><a pageScroll href="home#add">Nouveau sujet</a></div>
<div *ngIf="hasTopics(category.id)">
has topic
<div *ngFor="let topic
浏览 26提问于2019-02-03得票数 0
在AngularJS 2中有没有结合promises的方法？例如，在Angular 1中，我会使用$q.all将多个请求组合成一个promise。Angular 2有没有等价物？
浏览 41提问于2015-12-22得票数 4
回答已采纳
我刚接触angular，我在我的项目中使用angular 8。
我的html元素尝试显示仍未加载的数据。下面是HTML：
<tr *ngFor="let p of products; let i = index;">
<td width="">{{productType(p.productTypeId)}}</td>
</tr>
productType是从组件返回值以显示的函数。
下面是productType函数的定义：
productType(id){
return this.
浏览 0提问于2019-12-01得票数 1
我正在尝试做一个多http请求使用方法forkJoin。我需要一个像一个简单的请求一样返回所有的值，但我面临着一些错误。
我使用的是angular版本8.2.3，我的rxjs版本是~6.3.3
查看我的服务代码：
import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { map, catchEr
浏览 20提问于2019-11-03得票数 0
回答已采纳
我正在做一个来自angular的http post，我的api返回给我两组数组，现在我想将这些数组分别存储在两个不同的可观察数组中，我如何在angular中实现这一点。
浏览 13提问于2021-05-10得票数 0
2回答
我想要创建一个简单的社交媒体应用程序。我现在正在与groups.But一起工作，我不能只过滤一些用户是member.The代码的组
import { Component, OnInit, OnChanges } from '@angular/core';
import { AngularFireDatabase } from '@angular/fire/database';
import { GroupsService } from '../groups.service';
@Component({
selector: 'app-
浏览 4提问于2020-06-01得票数 0
我正在尝试将两个观察值组合成一个单一的观察值数组，我的Angular应用程序可以随着时间的推移订阅和接收值。这个场景使用的是聊天机器人。用户提供输入，机器人响应，这两个组合在聊天流的数组中。 请参阅以下内容： Chat input组件获取用户输入： onNewComment(value: string): void {
this.chatService.addComment(value);
} 然后它会与chat.service.ts对话 import { Injectable, Output } from '@angular/core';
import {
浏览 10提问于2019-12-18得票数 0
对于Observable.forkJoin推断错误的返回类型，然后在传递6个以上的参数时导致错误，我有一个问题。
Observable.forkJoin(service.getType1, service.getType2, service.getType3 ...)
.subscribe(x => {
this.type1Arr = x[0];
this.type2Arr = x[1];
this.type3Arr = x[2];
来自服务的每个函数调用都返回一个Observable<Arra
浏览 3提问于2017-09-21得票数 5
回答已采纳
2回答
我是angular的新手，正在尝试在firebase中做一些循环操作。我想通过电子邮件id获取所有信息。 user_info = [];
for (let index = 0; index < this.email.length; index++) {
this.get_student_service
.get_student_by_email_id(this.email[index])
.subscribe((res) => {
this.user_info.push(res);
浏览 32提问于2020-11-19得票数 1
在Angular 5中，我使用两个服务调用来查看是否应该允许用户查看页面，这是使用Route guard。然而，对于RXJS，我不确定处理这个问题的最好方法。
import { Injectable } from '@angular/core';
import { Router, CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { AuthService } from './auth.service';
import
浏览 12提问于2018-08-21得票数 0
回答已采纳
1回答
实际上，我正在使用一个现有的Api : PokéAPI来做一个webApp --问题是，我希望获得所有pokemons的名称，并在第一次打印它们。而且很管用!！但是..。不井然有序。我想要的是打印由id订购的口袋妖怪的列表(第一个是牛头怪，第二个ivysaure等等)，在这里，有时候ulbasaur是列表的第五个等等。我可以用异步来解决它，并在互联网上等待寻找，但我无法使它工作。
已经尝试了异步等待解决方案，但肯定是错误的。我不知道在哪里使用它们，何时以及如何使用它们。
===data.service.ts===
import { Injectable } from '@angular
浏览 2提问于2018-12-28得票数 0
回答已采纳
2回答
是否可以继续forkjoin http.get请求，即使其中一个请求失败。
我希望在angular2中实现类似的$q.allSettled功能。
请参见示例：
angular.module('qAllSettled', []).config(function($provide) {
$provide.decorator('$q', function($delegate) {
var $q = $delegate;
$q.allSettled = function(promises) {
return $q.all(promises
浏览 4提问于2016-06-27得票数 19
回答已采纳
在angular 4中，我们有一个泛型方法，它基本上将URI扁平化：
return Observable.forkJoin(fullUri, requestOptions)
.flatMap((results: [string, RequestOptions]) => this.http.get(results[0], results[1]))
.map(this.extractData)
.catch(this.errorMapperService.handleError);
现在在Angular 9中，Reque
浏览 28提问于2020-03-10得票数 0
在同一页上有多个数据表，每个页都有不同的API和参数。单击load按钮后，需要并行执行API并填充数据表。你能建议我如何实现并行执行吗，这里是示例代码，
API -1
const dataUrl1 =
"https://raw.githubusercontent.com/l-lin/angular-datatables/master/demo/src/data/data.json";
this.http.get(dataUrl1).subscribe(response => {
this.persons =
浏览 2提问于2021-04-29得票数 0
这段代码截取后在Angular 4中的工作效果与预期一致：
Observable.forkJoin(
Observable.of('test1'),
Observable.of('test2')
).map(result => {
console.log(result);
}).subscribe();
这段代码在rxjs 6中不再起作用：
forkJoin(
of('test1'),
of('test2')
).pipe(map(result => {
console.log(result);
浏览 9提问于2018-10-15得票数 3
我有Angular 6应用程序和外部服务api，返回每个请求最多50条记录。但在某些情况下，我需要获得100条记录。 例如，以下请求将为我提供前50条记录： www.example.com/records/?count=50 以下是接下来的50个： www.example.com/records/?count=50&lastID=FAKEID 有没有在一个角度服务方法中发送两个HTTP请求，但同时返回两个响应数据的最佳实践？
浏览 23提问于2019-02-26得票数 1
回答已采纳
我正在尝试进行两个api调用，其中一个api获取it数组，这些it是我根据某个对象返回的it进行另一个api调用所需的，在这些对象中，我可以根据从它接收到的数据来操作以显示一些表单输入。 但我现在在尝试拨打第二个电话时卡住了。任何关于我如何打第二个电话的建议都将不胜感激。 //api.service.ts
import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
@Injectable({
pro
浏览 16提问于2020-07-02得票数 0
回答已采纳
我正在使用Angular4和Firebase构建1-1聊天，我对Angular非常陌生。为了发起对话，我正在尝试显示'/ users‘子集的所有可用用户。因此，我需要获取用户/{user.uid}/username。
这是我的chat.component.ts：
import { Component, OnInit } from '@angular/core';
import {AngularFireDatabase, FirebaseListObservable} from 'angularfire2/database';
import { Angul
浏览 7提问于2017-07-11得票数 2
回答已采纳
2回答
有了一个承诺JS库()，我可以这样做：
promise.join([
promise.get('/settings'),
promise.get('/translations'),
promise.get('/main-data')
]).then(function(results) {
console.log(results);
});
现在我需要用Angular2来做这件事。因此，我使用getSettings、getTranslations等方法创建了一个服务--但是如何在使用该服务的组件中使用join呢？
(
浏览 1提问于2016-06-15得票数 2
如何使用角4/角5将同一URL并行多次发布到不同的参数并返回数据？
我有一个多个get请求
let value = Array();
let character = this.http.get('https://sameURL');
let characterHomeworld = this.http.get('https://sameURL');
value.push(character);
value.push(characterHomeworld);
forkJoin(value).subscribe(res
浏览 0提问于2018-02-28得票数 0
调用forkJoin时
forkJoin(observableA, observableB)
.pipe(takeUntil(onDestroy$))
当一个角度上的部件被破坏时，.pipe(takeUntil(onDestroy$))被添加到释放可观测值。这也是observableA和obserableB的要求吗？还是应该在传递给forkJoin的所有可观测数据上单独调用
浏览 5提问于2019-12-13得票数 4
回答已采纳
1回答
在以前的AngularJS应用程序中，我要迁移到角8，我有一个函数可以下载函数，方法是绑定函数并将它们放在数组中，等待使用减约函数进行调用。例如：
function stageForDownload() {
$scope.files.forEach(function (file) {
if (file.checked) {
$scope.downloadFunctions.push(downloadFile.bind(null, file));
}
});
}
function downloadStaged() {
$scope.downloadFun
浏览 0提问于2019-11-29得票数 0
回答已采纳
2回答
我在Angular 9中调用了两个服务方法，如下所示：
var u1 = this.userService.getByDepartmentId(departmentId).pipe(
map((payload: Payload<GetByDepartmentIdModel[]>) =>
payload.result.map((user: GetByDepartmentIdModel) => {
return {
id: user.id,
forename: user.forename,
su
浏览 15提问于2020-05-18得票数 1
回答已采纳
我正在尝试使用Django/python中的Angular2执行几个get请求。
我能够执行一个API请求并获得一个用户列表来查找当前用户的id。然后，我执行一个.flatMap操作来执行第二个请求，以获取所有评论的列表。我将userId与评论列表进行比较，以便只选择用户所做的评论。我收到的所有数据都是JSON。
在这一点上，我正在尝试获得属于每个评论的文章。但是，当我尝试运行一个函数来尝试在for循环中获取数据时，该请求甚至没有得到执行。
这是我的服务：
import {Injectable} from "angular2/core";
import {Http, Heade
浏览 0提问于2016-05-31得票数 4
我有两个行为主题流什么，我试图forkJoin没有运气。正如我想象的那样，它返回了它的最后两个值。有没有可能以某种方式实现它？
它不是在主题之后调用的。
let stream1 = new BehaviorSubject(2);
let stream2 = new BehaviorSubject('two');
Observable.forkJoin(stream1, stream2)
.subscribe(r => {
console.log(r);
});
浏览 6提问于2016-09-27得票数 13
今天，我打开了我的Angular项目，我发现了一个警告： forkJoin is deprecated: resultSelector is deprecated, pipe to map instead (deprecation) ? 我用谷歌搜索了一下，但我几乎找不到，而且我不知道如何摆脱警告。如何使用map而不是forkJoin
浏览 163提问于2019-02-14得票数 8
回答已采纳
我已经更新到Angular 6，并且我正在尝试使用ForkJoin，所以在我的服务上我有：
import { forkJoin } from 'rxjs/observable/forkJoin';
但它无法识别是什么，我得到的是：
...ForkJoin has no exported member
我该如何解决这个问题呢？
浏览 0提问于2018-05-06得票数 18
回答已采纳
我正在编写一个angular服务，它调用一个API端点来获取对象的一些基本元数据。我的苦衷是必须完成2个API调用才能获得我需要的所有数据。第一个API调用返回一个对象ID列表，第二个API调用使用这些ID来获取数据。
我需要在getFiles返回的条目数组上进行映射，并调用另一个端点来获取数据。我不希望订阅者得到一堆不同的响应，并且必须在他们的一端构建一个对象，我想要一个单一的响应。
//getFiles response
{
total_count: 2
offset: 0,
limit: 30,
entries: [{ id: '1' },
浏览 2提问于2018-01-16得票数 1
回答已采纳
在AngularJS中，我可以使用return $q.all(promises)将承诺返回给控制器。什么是正确的方法来做它的角度？如何将数据返回给组件？
我的服务：
import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import { Observable } from 'rxjs/Rx';
import { Item } from '../item';
@Injectable()
export class GetI
浏览 1提问于2017-07-27得票数 0
回答已采纳
1回答
forkjoin后无法订阅
、、、、
我想在angular中的一个循环中执行一些firebase操作。当我向firebase发送HTTP请求时，它会返回一个可观察数组，因此我使用forkjoin将这个可观察数组转换为单个可观察数组。现在的问题是，当我订阅这些新的观察点时，我没有得到任何东西 get_student_email() {
this.get_project_service
.get_project_by_doc_id(this.batchID, this.projectID)
.subscribe((res) => {
this.response = res;
浏览 2提问于2020-11-19得票数 2
我在angular中使用RxJ编写了以下代码：
private loadData(id) {
const inputData = .....
this.backendservice.getData(inputData).pipe(take(1)).subscribe(data => {
// do stuff
});
}
目前，代码只处理单个id。现在我想让它为多个I工作，并有一个可能的代码结构，如下所示：
private loadData(ids) {
const M
浏览 1提问于2020-11-20得票数 0
我正在尝试从一个angular应用程序中轮询一组app。 这是我的代码： // service
subscribeToData(response: any): Observable<any> {
const requests = [];
response.forEach(item => {
requests.push(this.startPolling(item.href).pipe(catchError(err => of('error'))));
});
return forkJoin(reques
浏览 5提问于2019-01-23得票数 1
回答已采纳
我想用angular2编写jquery代码。我怎么能这么做？
$.when($.ajax("url"), $.ajax("/url2"))
.then(myFunc, myFailure);
and
$.when( $.ajax("/req1"), $.ajax("/req2"), $.ajax("/req3") ).then(function(resp1, resp2, resp3){
// plot graph using data from resp1, resp2 & resp3
浏览 3提问于2017-07-18得票数 1
回答已采纳
如何将此代码转换为异步代码？我已经简化了实际的代码-本质上，我是将服务层转换为异步还是实用程序库？
我有一个组件，它有基本的字段显示在页面上：
import { Component, OnInit } from '@angular/core';
import {UserInfomrationServiceService} from '../user-infomration-service.service';
@Component({
selector: 'app-user-information',
浏览 0提问于2019-08-03得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
