Javascript 如何在Angular 8中使用HTML输入的JSON文件？

在我当前的Angular 8项目中，我有两个JSON文件，它们应该连接到一个JSON数组。然后应导出新文件

在谷歌搜索了很长一段时间后，我没有找到一个解决方案如何使用这两个JSON文件，我通过两个HTML输入调用这两个文件，这样我就可以在Angular组件中组合这两个文件，并使用这两个JSON文件的输入形成一个JSON数组

我当前的代码：

JsonConverterComponent.html

<div class="form-group">
   <label for="Json1">Json 1</label>
      <input [(ngModel)]="json1" type="file" id="Json1" required>
</div>
<div class="form-group">
   <label for="Json2">Json 2</label>
      <input [(ngModel)]="json2" type="file" id="Json2" required>
</div>
<button [buttonLabel]="buttonNameJson" [disableCheck]="!json1 || !json2" (click)="combineJSON()"></button>

如果我只想调用两个导入的JSON文件中的一个文件的内容，我总是会得到错误“undefined”

---

我必须做些什么才能使用JsonConverterComponent.ts中的单个JSON？

指令不能用于

类型的
输入
，您必须对
更改
事件做出如下反应：

<input (change)="onFileChange($event)" type="file" id="Json1" required>

<input (change)="onFileChange($event)" type="file" id="Json2" required>

谢谢，到目前为止效果还不错，但是当我尝试连接两个JSON文件时，我只得到一个伪造路径
C:\fakepath\JsonOne.jsonC:\fakepath\JsonTwo.json
你说的“连接两个json文件”是什么意思？我想将两个json文件的内容转换为一个文件
onload
事件将在读取内容后触发，因此转换两个json文件的逻辑应该在
onload
函数中。
<input (change)="onFileChange($event)" type="file" id="Json1" required>

<input (change)="onFileChange($event)" type="file" id="Json2" required>

onFileChange(event){
    const fileToLoad = event.target.files[0];
    const fileReader = new FileReader();
    fileReader.onload = function(fileLoadedEvent){
        const textFromFileLoaded = fileLoadedEvent.target.result;
        const json = JSON.parse(textFromFileLoaded);
        console.log(json);
    };
    fileReader.readAsText(fileToLoad, "UTF-8");
}