Javascript 如何在Angular中读取JSON文件？

我试图从本地磁盘加载一个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);
});

loadFile（事件）{
const eventObj:MSInputMethodContext=event；
const target:HTMLInputElement=eventObj.target；
常量文件：FileList=target.files；
this.file=文件[0]；
const reader=new FileReader（）；
reader.readAsText（this.file'utf8'）；
this.canvas.loadFromJSON（this.file，this.canvas.renderAll.bind（this.canvas），函数（o，对象）{
日志（o，对象）；
});

---

关于如何实现这一点有什么想法吗？

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

loadFile（事件）{
const eventObj:MSInputMethodContext=event；
const target:HTMLInputElement=eventObj.target；
常量文件：FileList=target.files；
this.file=文件[0]；
const reader=new FileReader（）；
reader.readAsText（this.file'utf8'）；
reader.onload=函数（）{
this.canvas.loadFromJSON（reader.result，this.canvas.renderAll.bind（this.canvas），函数（o，对象）{
日志（o，对象）；
});
}

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

loadFile（事件）{
const eventObj:MSInputMethodContext=event；
const target:HTMLInputElement=eventObj.target；
常量文件：FileList=target.files；
this.file=文件[0]；
const reader=new FileReader（）；
reader.readAsText（this.file'utf8'）；
reader.onload=函数（）{
this.canvas.loadFromJSON（reader.result，this.canvas.renderAll.bind（this.canvas），函数（o，对象）{
日志（o，对象）；
});
}

为什么不使用加载了$http的json文件的服务。为什么不使用加载了$http的json文件的服务可能是重复的。为什么不使用加载了$http的json文件的服务可能是重复的