Question

仅在完成多次服务调用后，才能从组件中调用方法吗？

我有一个service.ts文件，该文件具有一种方法，该方法将根据键（即此处的obj）返回具有不同值的数组，如下所示：-

getdata(type:numer)
 {
   // make a post call to get the data
 }

在这里，在component.ts文件中，我有两个方法将调用上述服务方法，如下所示：单击编辑表单按钮时，这2种方法用于填充html下拉列表

method1()
{
   this.service.getdata().subscribe((res: any) => {
      data1 = res;
    });
}

method2()
{
   this.service.getdata().subscribe((res: any) => {
      data2 = res;
    });
}

我还有另一种方法，可以在单击“编辑”时填充表单数据

fillForm()
{
    // do something
}

现在，我的要求是我需要在component.ts中调用method1和method2 而且我只需要在上述两个方法完成后才调用此fillForm方法因为我需要确保在编辑表单之前先填写下拉列表

Answer 1

您好，如果您使用的是 rxjs 5 ，则可以使用Observable zipping：

Observable.zip(
    this.method1(),
    this.method2()
).subscribe(
    ([dataFromMethod1, dataFromMethod2]) => {
        // do things
    },
    (error) => console.error(error),
    () => {
        // do things when all subscribes are finished
        this.fillform();
    }
)

使用 rxjs 6 ，只需将Observable.zip更改为forkJoin即可：

forkJoin(
    this.method1(),
    this.method2()
).subscribe(
    ([dataFromMethod1, dataFromMethod2]) => {
        // do things
    },
    (error) => console.error(error),
    () => {
        // do things when all subscribes are finished
        this.fillform();
    }
)

您将需要更改方法以返回Observables：

method1()
{
   return this.service.getdata();
}

method2()
{
   return this.service.getdata();
}

如何从角度组件并行调用多个http服务

1 个答案: