Angular 在数组中填充可观测数据并过滤此数组

我获取几个API的数据，将数据放入数组并过滤这些数组。为了确保它们都正确执行，我将所有get调用嵌套在彼此内部，但是get调用越多，它将得到的越混乱

this.http.get（url1.subscribe）
（数据1=>{
//代码//
this.http.get（url2.subscribe）
（数据2=>
{/*代码*/}/*第二次请求订阅函数结束*/
}//第一次请求结束订阅功能

所以我创建了一个service.ts，包含所有get调用

//代码
getData1（）{/*代码*/}
getData2（）{/*代码*/}
getData3（）{/*代码*/}
}

在detail.component.ts中，我填充了数组：

//代码
恩戈尼尼特（）
{
this.Service.getData1（）
.订阅（/*在数组1中填入数据*/）
this.Service.getData2（）
.订阅（/*用数据*填写数组2）
{

尽管第一个订阅很好，第二个却不行——但我不知道为什么。 我基本上会尝试查找所有具有已定义id的项目：

//代码
公共数据2:any=[]
公共id='123'
//代码
恩戈尼尼特（）
{
//代码
this.Service.getData2（）
订阅
（数据2=>
{
this.data2=data2.filter（item=>item.id==this.id）
返回数据2
}
)
//代码
}

---

过滤中可能有错误吗？

为什么不在这里使用

forkJoin

将所有请求合并到一个中，并将所有响应合并在一起，然后过滤数据

forkJoin

是

rxjs

import { forkJoin } from 'rxjs';  // RxJS 6 syntax

示例：

服务台

export class DataService {

  constructor(private http: HttpClient) { }

  public getAllForkJoin(): Observable<any[]> {
    let res1 = this.http.get(requestUrl1);
    let res2 = this.http.get(requestUrl2);
    let res3 = this.http.get(requestUrl3);
    return forkJoin([res1, res2, res3]);
  }
}

---

你问错了问题。需要顺序执行或并行。顺序在编译时是可预测的，也就是说，你肯定知道你的代码将以什么顺序执行，并且下一节至少依赖于它的直接前辈的成功。并行是不同的：有许多可能的执行顺序，有些根据（不可预测的）运行时决策选择特定的

因此：

this.Service.get（url1）.pipe（mergeMap（data1=>this.Service.get（url2））

将产生一个顺序执行，除非您失去了对

data1

的访问。虽然在某些（非常罕见的）上下文中需要它，但我假设您真正需要的是

forkJoin（this.Service.get（url1），this.Service.get（url2））

它将同时而不是按顺序生成两个结果，一旦两个结果都成功，就将它们向下推

除此之外，请注意两种方法：

---

this.Service.get（url1.pipe）（data1=>forkJoin（of（data1），this.Service.get（url2））

将确保先加载

url1

，然后再加载

url2

，但仍将保留来自两个URL的数据。这是可能的，但在大多数情况下是无用的，甚至是有害的。

在处理可观察的（但通常也是这样）您应该尽可能保持数据不变。在异步工作流中使用类上引用的ID似乎容易出错。您是否可以对您试图实现的目标进行stackblitz复制，并通过返回（yourObject）的可观察的

来模拟服务调用

？可能更容易提供帮助you@maxime1992-是的，我知道，我实际上不硬编码ID，而是从其他地方获取它-我只是将其更改为此以降低复杂性stackblitz呢？如果没有复制，很难帮助你：）我非常喜欢这个想法：）-它说“找不到名称‘可见’”但是在service.ts中-你知道我忘记了什么吗？@butterfly尝试从'rxjs/Observable'导入{Observable}或导入{Observable}从“rxjs”开始，如果有帮助，请接受！如果您仍然无法找到错误，那么您可能必须安装npm安装--保存rxjs compat…请参见此=>Surjeet:请尽量避免将quote设备用作一般的高亮显示设备。它具有特定的语义含义，即引用他人语音中的文本。请使用此r演讲、书籍、剧本、电影、手册等。没有必要使用它，因为它的使用可能会令人困惑。感谢@halfer！我会记住这一点。再次感谢您的建议！：）您的代码是service.ts还是component.ts，对于您使用服务的地方，即返回

可观察的调用方法，我不确定这一点。
export class DemoComponent implements OnInit {
    public responseData1: any;
    public responseData2: any;
    public responseData3: any;

    constructor(private dataService: DataService) {}

    ngOnInit() {
        this.dataService.getAllForkJoin().subscribe(data => {
            this.responseData1 = data[0];
            this.responseData2 = data[1];
            this.responseData3 = data[1];
        });
    }
}