在 Angular 2 应用程序中读取 JSON 文件答案

【问题标题】：Reading JSON file in angular 2 application在 Angular 2 应用程序中读取 JSON 文件
【发布时间】：2017-07-04 09:51:51
【问题描述】：

我有一个文件 data.json，我想在我的 Angular 2 应用程序中导入它。我正在获取带有 HTML 输入标记的文件。

<input type="file" (change)="onImport($event)"/>

在我的打字稿文件中，我想读取这个 data.json 文件并将文件的内容存储在 JSON 数组中。我已经搜索但找不到任何方法来读取文件或任何可以帮助我解决此问题的库。

【问题讨论】：

标签： html angular2-template angular2-services

【解决方案1】：

使用File API 和JSON.parse() method 中的FileReader，例如：

  onImport(event) {
    var file = event.srcElement.files[0];
    if (file) {
        var reader = new FileReader();
        reader.readAsText(file, "UTF-8");
        reader.onload = function (evt) {
            console.log(JSON.parse(evt.target.result));
        }
        reader.onerror = function (evt) {
            console.log('error reading file');
        }
    }
  }

【讨论】：

【解决方案2】：

我尝试应用@Stanislav 解决方案，但遇到的问题很少。最终以下代码起作用了

参考：get the value from a FileReader in Angular 2

html代码

<input (change)=readJson($event);" type="file" />

component.ts 代码

readJson(event) { var file = event.srcElement.files[0]; if (file) { var reader = new FileReader(); reader.readAsText(file, "UTF-8"); reader.onload = function (evt) { console.log(JSON.parse(evt.target["result"])); } reader.onerror = function (evt) { console.log('error reading file'); } } }

event.target["result"]是我修改的部分。

【讨论】：