如何在Angular中读取JSON文件？

Question

我想从本地磁盘加载JSON文件，并使用它的数据填充FabricJS画布。我在从文件中获取数据时遇到问题。

这是我到现在为止。

app.html

<input type="file" accept=".json" id="fileInput" (change)="loadFile($event)"/> 

app.ts

loadFile(event) { 
const eventObj: MSInputMethodContext = <MSInputMethodContext> event; 
const target: HTMLInputElement = <HTMLInputElement> eventObj.target; 
const files: FileList = target.files; 
this.file = files[0]; 

const reader = new FileReader(); 
reader.readAsText(this.file, 'utf8'); 

this.canvas.loadFromJSON(this.file, this.canvas.renderAll.bind(this.canvas), function (o, object) { 
    console.log(o, object); 
}); 

上我怎样才能使这项工作有什么想法？

Answer 1

FileReader有一个异步api。

您必须注册onload事件的回调以获取数据。

loadFile(event) { 
const eventObj: MSInputMethodContext = <MSInputMethodContext> event; 
const target: HTMLInputElement = <HTMLInputElement> eventObj.target; 
const files: FileList = target.files; 
this.file = files[0]; 

const reader = new FileReader(); 
reader.readAsText(this.file, 'utf8'); 
reader.onload = function() { 
    this.canvas.loadFromJSON(reader.result, this.canvas.renderAll.bind(this.canvas), function (o, object) { 
    console.log(o, object); 
}); 
}