上传 json 文件并以角度 8 读取

Question

下面是我的代码，但我没有定义：

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 中显示未定义。

Answer 1

很不清楚你在问什么。不过，我认为这应该可以回答您的问题。

以后，创建一个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 example

更新

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

上使用 getter/setter

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

上传 json 文件并以角度 8 读取

upload json file and read it in angualr 8

javascript

typescript

angular8