AngularでJSONファイルを読むにはどうすればよいですか？

Question

ローカルディスクからJSONファイルを読み込み、そのデータを使用してFabricJSキャンバスを塗りつぶししようとしています。ファイルからデータを取得する際に問題があります。

これは私が今まで持っていたものです。

<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); 
}); 

私はこの作品を作ることができる方法上の任意の考え

app.html？

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); 
}); 
}