gpt4 book ai didi

javascript - 使用异步方法循环遍历数组仅采用 Angular 2 (ecma6) 中的最后一个元素

转载 作者:行者123 更新时间:2023-12-03 08:13:20 24 4
gpt4 key购买 nike

我有以下代码:

for( let filename of ["action", "course", "program", "staff", "student"]){
http.get('data/'+filename+'.json').map(res => res.json()).subscribe(
staff => localStorage.setItem(filename, JSON.stringify(staff)
));
}

转译为:

for (var _i = 0, _a = ["action", "course", "program", "staff", "student"]; _i < _a.length; _i++) {
var filename = _a[_i];
http.get('data/' + filename + '.json')
.map(function (res) { return res.json(); })
.subscribe(function (staff) { return localStorage.setItem(filename, JSON.stringify(staff)); });
}

它应该循环遍历一个字符串数组,其中包含我希望在本地存储中加载的 json 对象的文件名。

问题如下:
我只获取本地存储中存储的最后一个元素的值。其余的都消失了。

原因是:
当需要调用 .subscribe() 中的 localStorage.setItem 时文件名中存储的值等于数组中的最后一个值。

我的想法

  1. 使 HTTP 请求同步 {当然这是一个坏主意},但应用程序实际上依赖于这些数据,因此我不介意阻塞 ui 直到完成。 |无论如何 ng2 文档没有显示如何做到这一点的线索......
  2. 使用 Promises,我不知道如何使用 Angular 2
  3. 找到一种方法来确保文件名值是为每个循环存储的某种方式
  4. 忘记在循环中执行此操作并将其硬编码下来
<小时/>

我的代码

app.ts

import {Component,  bootstrap, NgFor,CORE_DIRECTIVES,OnInit,provide} from 'angular2/angular2';
import {RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS, RouteParams, RouteData,
LocationStrategy, HashLocationStrategy,Location} from 'angular2/router';
import {Http, HTTP_PROVIDERS} from 'angular2/http';

@Component({
selector: 'app-holder',
template: `<router-outlet></router-outlet>`,
viewProviders: [HTTP_PROVIDERS],
directives: [ROUTER_DIRECTIVES]]
})
export class MainComponent {
constructor(http: Http) {
if(dataStorage.shouldLoad()){
for( filename of ["action", "actiontype", "advisertype", "course", "program", "staff", "student"]){
http.get('data/'+filename+'.json').map(res => res.json()).subscribe(staff => localStorage.setItem(filename, JSON.stringify(staff)));
}
}
}
}

bootstrap(MainComponent,[ROUTER_PROVIDERS, provide(LocationStrategy, {useClass: HashLocationStrategy})]);

index.html

<html>
<head>
<title>Star App</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="../node_modules/systemjs/dist/system.src.js"></script>
<script src="../node_modules/angular2/bundles/angular2.dev.js"></script>
<script src="../node_modules/angular2/bundles/router.dev.js"></script>
<script src="../node_modules/angular2/bundles/http.dev.js"></script>
<script>
System.config({
packages: {'app': {defaultExtension: 'js'}}
});
System.import('app/app');
</script>
</head>
<body>
<app-holder>Please wait while Loading...</app-holder>
</body>
</html>
<小时/>

背景检查:

最佳答案

你刚刚掉到了infamous closure in a loop issue .

您认为 ES6 会通过其 block 作用域让您免于这种情况吗?是的,确实如此,但前提是您实际上声明您的变量:

for (let filename of ["action", "course", "program", "staff", "student"]) {
// ^^^
http.get('data/'+filename+'.json')
.map(res => res.json())
.subscribe(staff => localStorage.setItem(filename, JSON.stringify(staff)));
}

关于javascript - 使用异步方法循环遍历数组仅采用 Angular 2 (ecma6) 中的最后一个元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34052188/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com