angular4读取本地json文件

          最近在使用angular4框架做一个项目，需要将json文件中的数据上传到服务器，这就需要先在本地解析json文件获取其中的内容，再将内容推送上去，下面是自己找到的解决办法以及遇到的一些 小坑。

       一开始我觉得angular4应该有解决这个问题的一套办法，于是 我找到了一篇文章：http://www.concretepage.com/angular-2/angular-2-http-get-example#example 有兴趣自己看一下，是使用angular2的，有人说angular2跟angular4差别不是很大，于是我照着代码自己敲了一遍，最后虽然没报错，但就是得不到想要的结果，最后实在找不到原因，果断放弃，决定曲线救国，采用html5的强大File api。话不多说，附上代码：

        html页面文件：

                  

                           

                                    EDI

                                        
                         

                   

         ts文件：

                   myForm = new FormGroup({
                              EDI: new FormControl(),
                    });

                    private JsonObj;

                    handleFileSelect(evt) {
                              var files = evt.target.files; // FileList object
                              var f = files[0];  //f是文件的详细信息
                              var reader = new FileReader();
                                                         
                               // Closure to capture the file information.
                             reader.onload = (f => {
                                        return e => {
                               // Render thumbnail.
                              this.JsonObj = JSON.parse(e.target.result);//e.target.result返回的是json文件中的详细内容
                                                                                                   //JsonObj返回的是内容的缩略图
                              console.log(this.JsonObj);
                            };
                      })(f) ;
       
                             // Read in the image file as a data URL.
                              reader.readAsText(f);
                               alert( this.JsonObj);  //这行代码只是测试用方便解释说明
                      }

                上面代码为什么这么写可以参考http://www.javascripture.com/FileReader的写法，下面我说一下我遇到的小坑，首先上面的代码并不是从上到下一行一行执行的， 换句话说onload方法是在所有代码都执行完它才开始执行的，这就产生了一个问题，比如 alert( this.JsonObj); 这行代码输出的是undefined，因为当执行这行代码的时候onload方法还没执行呢，自然就是undefined，我之前遇到的问题就是如何等到onload方法执行后获取返回的json数据，第一想到的就是定义一个全局变量，但很奇怪，全局变量我拿不到，上面是我完全解决问题后的代码，在此之前我的代码是这样的： reader.onload = (function(f) => {
                                        return function(e) => {
                               // Render thumbnail.
                              this.JsonObj = JSON.parse(e.target.result);//e.target.result返回的是json文件中的详细内容
                                                                                                   //JsonObj返回的是内容的缩略图
                              console.log(this.JsonObj);
                            };

这与上面的代码唯一不同的就是function的写法不一样，但使用=>写法全局变量的使用是正常的，而使用function(e)的写法全局变量却获取不到，很奇怪。知道的可以留言求解答。

        这是读取本地json文件这个问题我遇到的小坑，虽然没什么，希望看到这篇可以帮到你，不用像我一样解决半天，可以节省时间。