时间戳

首页 > 解决方案 > 上传json文件并在angualr 8中读取

javascript - 上传json文件并在angualr 8中读取

问题描述

下面是我的代码，但我得到未定义：

onChange(fileList: FileList): void {
    var file = fileList[0];
    var fileReader = new FileReader();
    var newFile = {};
    fileReader.readAsText(file, 'UTF-8');
    fileReader.onload = () => {
      newFile = fileReader.result as object;
      this.updateObj = cloneDeep(newFile);
    };
    console.log('updateObj', this.updateObj);
}

我想上传 json 文件（ARM 模板）并阅读它，但在 console.log 中 this.updateObj 显示未定义。

标签： javascripttypescriptangular8

解决方案

您要问什么还不清楚。我认为这应该回答你的问题。

将来，创建MRE将使其他人更容易帮助您。

.ts

  updateObj: any;
  onChange(event: any): void {
    var file = event.target.files[0];
    var fileReader = new FileReader();
    fileReader.readAsText(file, "UTF-8");
    fileReader.onload = () => {
      const newFile = fileReader.result as string;
      this.updateObj = JSON.parse(newFile);
    };
  }

.html

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

<pre><code>{{updateObj | json}}</code></pre>

Stackblitz 是用户为 Angular 问题创建 MRE 的绝佳工具。

Stackblitz 示例

更新

@DnyaneshSurya 感谢您的 MRE。您的示例正在运行，但仍不清楚您想要做什么。ngOnInit仅在组件初始化时调用一次。你Input当时的价值是未定义的。这不会改变，因为该ngOnInit方法只被调用一次。不过，您的变量armTemplate正在更新，如果您将 hello 组件模板更新为<h1>{{armTemplate | json}}</h1>. 但是，如果您想在该值更新时执行某些操作，那么最简单的方法是在您的armTemplate属性上使用 getter/setter。

这是另一个Stackblitz示例来演示。

推荐阅读