在我的 Angular 应用程序中，我需要将数据存储到一个数组中，该数组在初始阶段为空。
示例:
someFunction() {
let array = [];
console.log("step 1");
this.service.getRest(url).subscribe(result => {
result.data.forEach(element => {
console.log("step 2");
array.push(element); // Pushing all the objects comes from res.data
});
console.log("step 3");
});
console.log("step 4");
}
我在这里列出了 console.log()有阶梯顺序。
调用函数的顺序是，
第一步 第 4 步 第2步 第三步
在第 1 步之后，第 4 步调用，然后是第 2 步。所以如果我 console.log(array)代替第 4 步，它再次给出空数组..
但代替step 2 and 3它给出了值(value)。从服务中出来的值(value)是空的。
因此我总是在 array 中得到空值.
请帮助我将数据存储到变量中，即使服务调用和响应返回有一段时间。
修改代码试了很久还是不行..
编辑:
我在下面给出了我目前正在使用 stackblitz 链接 https://stackblitz.com/edit/angular-x4a5b6-ng8m4z 的实时应用程序
在此演示中，请参阅文件 https://stackblitz.com/edit/angular-x4a5b6-ng8m4z?file=src%2Fapp%2Fquestion.service.ts
我在哪里使用服务调用.. 如果我输入 async getQuestions() {} , 它给出了 questions.forEach of undefined 的错误
在service.ts
jsonData: any = [
{
"elementType": "textbox",
"class": "col-12 col-md-4 col-sm-12",
"key": "project_name",
"label": "Project Name",
"type": "text",
"value": "",
"required": false,
"minlength": 3,
"maxlength": 20,
"order": 1
},
{
"elementType": "textbox",
"class": "col-12 col-md-4 col-sm-12",
"key": "project_desc",
"label": "Project Description",
"type": "text",
"value": "",
"required": true,
"order": 2
},
{
"elementType": "dropdown",
"key": 'project',
"label": 'Project Rating',
"options": [],
"order": 3
}
];
getQuestions() {
let questions: any = [];
//In the above JSON having empty values in "options": [],
this.jsonData.forEach(element => {
if (element.elementType === 'textbox') {
questions.push(new TextboxQuestion(element));
} else if (element.elementType === 'dropdown') {
//Need to push the data that comes from service result (res.data) to the options
questions.push(new DropdownQuestion(element));
console.log("step 1");
//The service which i call in real time..
// return this.http.get(element.optionsUrl).subscribe(res => {
//res.data has the following array, Using foreach pushing to elements.options.
// [
// { "key": 'average', "value": 'Average' },
// { "key": 'good', "value": 'Good' },
// { "key": 'great', "value": 'Great' }
// ],
// res.data.forEach(result => {
console.log("step 2");
// element.options.push(result);
// });
// console.log(element.options) give values as the above [
// { "key": 'average'...
console.log("step 3");
// console.log(element.options) give values as the above [
// { "key": 'average'...
// });
console.log("step 4");
//But here console.log(element.options) gives empty
}
});
return questions.sort((a, b) => a.order - b.order);
}
最佳答案
第一步是将函数 getQuestion 转换为 Observable。
为什么需要它？因为您需要调用 this.http.get(element.optionsUrl)。这是异步的(所有 http.get 返回可观察)。并且需要等待调用完成才能获取数据。 observable 的好处是在“订阅函数”中你有数据。
因此，我们必须考虑“服务返回可观察对象，组件订阅服务”。
好吧，让这个问题。主要问题是我们需要多次调用 http.get。正如我们所知，所有对 http 的调用都是异步的，所以如何确定我们拥有所有数据(请记住，我们只有订阅函数中的数据。因为我们不希望有多个订阅 - 最好有no subscribe- 在我们的服务中，我们需要使用 forkJoin。ForkJoin 需要一个调用数组，并返回一个结果数组。
所以第一步是创建一个 observable 数组，然后我们返回这个 observable 数组。稍等!我们不想返回一个带有选项的数组，我们想要一个可观察的问题。为此，尽管返回了 observable 数组，我们还是返回了一个使用这个 observable 数组的对象。我在响应的底部放了一个简单的例子
getQuestions():Observable<any[]> { //See that return an Observable
let questions: any = [];
//First we create an array of observables
let observables:Observable<any[]>[]=[];
this.jsonData.forEach(element => {
if (element.elementType === 'dropdown') {
observables.push(this.http.get(element.optionsUrl))
}
}
//if only want return a forkjoin of observables we make
//return forkJoin(observables)
//But we want return an Observable of questions, so we use pipe(map)) to transform the response
return forkJoin(observables).pipe(map(res=>
{ //here we have and array like-yes is an array of array-
//with so many element as "dowpdown" we have in question
// res=[
// [{ "key": 'average', "value": 'Average' },...],
// [{ "key": 'car', "value": 'dog },...],
// ],
//as we have yet all the options, we can fullfit our questions
let index=0;
this.jsonData.forEach((element) => { //see that have two argument, the
//element and the "index"
if (element.elementType === 'textbox') {
questions.push(new TextboxQuestion(element));
} else if (element.elementType === 'dropdown') {
//here we give value to element.options
element.option=res[index];
questions.push(new DropdownQuestion(element));
index++;
}
})
return question
}))
}
注意:关于如何使用“of”转换返回值的函数:简单示例
import { of} from 'rxjs';
getData():any
{
let data={property:"valor"}
return data;
}
getObservableData():Observable<any>
{
let data={property:"observable"}
return of(data);
}
getHttpData():Observable<any>
{
return this.httpClient.get("myUrl");
}
//A component can be call this functions as
let data=myService.getData();
console.log(data)
//See that the call to a getHttpData is equal than the call to getObservableData
//It is the reason becaouse we can "simulate" a httpClient.get call using "of"
myService.getObservableData().subscribe(res=>{
console.log(res);
}
myService.getHttpData().subscribe(res=>{
console.log(res);
}
注意2:forkJoin和map的使用
getData()
{
let observables:Observables[];
observables.push(of({property:"observable"});
observables.push(of({property:"observable2"});
return (forkJoin(observables).pipe(map(res=>{
//in res we have [{property:"observable"},{property:"observable2"}]
res.forEach((x,index)=>x.newProperty=i)
//in res we have [{property:"observable",newProperty:0},
// {property:"observable2",newProperty:1}]
}))
}
更新 还有其他方法可以做这些事情。我认为最好有一个返回完整“问题”的函数。
//You have
jsonData:any=....
//So you can have a function that return an observable
jsonData:any=...
getJsonData()
{
return of(this.jsonData)
}
//Well, what about to have a function thah return a fullFilled Data?
getFullFilledData()
{
let observables:Observables[]=[];
this.jsonData.forEach(element => {
if (element.elementType === 'dropdown') {
observables.push(this.http.get(element.optionsUrl))
}
})
return forkJoin(observables).pipe(map(res=>
let index = 0;
this.jsonData.forEach((element) => {
if (element.elementType === 'dropdown') {
element.options = res[index];
index++;
}
})
return this.jsonData
}))
}
这样你就不需要改变组件了。如果你调用 getFullfilledData 你有(订阅)数据
查看 stackblitz
关于javascript - 如何处理服务延迟的数据？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53338806/