Question

我正在做角度应用程序，在其中我正在使用内部服务来创建forEach函数，

   this.data.forEach(function(element) => {
      this.appService.getRest(element.optionsUrl, localStorage.getItem('token')).subscribe(result => {
           element.options = result.data;
           this.getIntake(this.data);
         });
    });

在这里，我试图将结果存储到element.options的服务中，然后我调用一个函数以取回data填充的element.options值，因为仅来自服务我将获得options的值，因此之后，我需要将此数据发送到函数并需要对其进行检索。.

result.data是一个数组，它分别为三个提供以下[{"id":1,"name":"option1"}]，[{"id":2,"name":"option2"}]，[{"id":3,"name":"option3"}]。

在this.getIntake(data);函数中，如果我console.log(data)

getIntake(data) {
 console.log(data);
}

然后它多次赋予相同的数组相同的值，如..

[
{"name":"abc", value: "abc", optionUrl: "abcUrl", options: [{"id":1,"name":"option1"}]},
{"name":"def", value: "def", optionUrl: "defUrl", options: [{"id":2,"name":"option2"}]},
{"name":"ghi", value: "ghi", optionUrl: "ghiUrl",  options: [{"id":3,"name":"option3"}]}
]


[
{"name":"abc", value: "abc", optionUrl: "abcUrl", options: [{"id":1,"name":"option1"}]},
{"name":"def", value: "def", optionUrl: "defUrl", options: [{"id":2,"name":"option2"}]},
{"name":"ghi", value: "ghi", optionUrl: "ghiUrl",  options: [{"id":3,"name":"option3"}]}
]

[
{"name":"abc", value: "abc", optionUrl: "abcUrl", options: [{"id":1,"name":"option1"}]},
{"name":"def", value: "def", optionUrl: "defUrl", options: [{"id":2,"name":"option2"}]},
{"name":"ghi", value: "ghi", optionUrl: "ghiUrl",  options: [{"id":3,"name":"option3"}]}
]

由于data具有三个对象，因此它被反射了三次。.

对于每个对象都有element.optionsUrl，我需要订阅它，并且需要将数据存储在element.options中，如果我退出服务，我就没有得到options中的值，因此我正在内部创建一个函数服务，并将this.data与options一起传递给它。.在该函数中，我正在获取具有值的数据，但是我只需要获取一次完全填充的数据，但是由于数据具有三个对象，因此它给出了三个。通过这种方法，最终只获得一个具有填充数据的数组，而不是三个。

堆叠闪电战 https://stackblitz.com/edit/angular-kwvjqu

由于服务被延迟，我正在服务的运行时调用函数并发送数据。

如何使用纯角度/打字稿，javascript方式从此多个生成的数组中仅获取一个数组？

Answer 1

由于您正在forEach内部触发数组中每个元素的请求，因此该请求将被预订多次，因此您会看到它记录了3次。

RxJS提供帮助。

与其使用Array和forEach遍历from，不如将Array转换成Observable的数组，然后您可以使用就像发出http请求一样。

from(this.data)  //Converts your data array to array of Observables
.pipe(
    mergeMap(element => {
        return this.appService.getRest(element.optionsUrl, localStorage.getItem('token')) //fires http request for each element
        .pipe(
            map((result) => {  //change the data
                element.options = result.data;
                return of(element); //returns an observable for each element
            })
        )
    }),
    combineAll() //combines all the observable into one
)
.subscribe(x=>{
    this.getIntake(x); //x contains an array of your element
});

从多个获取单个数组

1 个答案: