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

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

转载作者：行者123 更新时间：2023-12-03 08:13:20

我有以下代码:

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 时文件名中存储的值等于数组中的最后一个值。

我的想法

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

<小时/>

我的代码

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>

<小时/>

背景检查:

如何在 ng2 中使用 http https://angular.io/docs/ts/latest/api/http/Http-class.html
使用 Angular 1 解决类似问题:how to make synchronous http request in angular js
可以设置为使用 ng2 进行 http 调用的选项:https://fetch.spec.whatwg.org/#requestmode

最佳答案

你刚刚掉到了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/

文章推荐： java - 使用 RestEasy Reactive 库中的 RestResponse 时出错

文章推荐： jfrog-cli - 从存储库列表中删除旧工件

文章推荐： javascript - 脚本 src 为 'arguments'

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

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