英文:
How to use JSON file from HTML input in Angular 8?
问题
在我的当前Angular 8项目中，我有两个JSON文件，它们应该连接成一个JSON数组。然后应该导出新文件。
在经过长时间的Google搜索后，我没有找到解决办法，无法使用两个HTML输入调用的两个JSON文件，以便我可以在Angular组件中将这两个文件的输入组合成一个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>
JsonConverterComponent.TS
export class JsonConverterComponent implements OnInit {constructor(private http: HttpClient) { }ngOnInit() {}buttonNameJson = "Combine JSON";json1: File;json2: File;test: File;one = this.json1;two = this.json2;public combineJSON() {this.test = this.one;console.log(this.test);}}
如果我只想调用两个导入的JSON文件中的一个的内容，我总是得到"undefined"错误。
我应该怎么做才能在JsonConverterComponent.ts中使用单独的JSON？
英文:
In my current Angular 8 project I have two JSON files which should be connected to one JSON array. The new file should then be exported.
After googling for a long time I didn't find a solution how to use the two JSON files, which I call up via two HTML inputs, so that I can combine both files in the Angular Component to form a JSON array with input from both JSON files.
My current code:
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>
JsonConverterComponent.TS
export class JsonConverterComponent implements OnInit {constructor(private http: HttpClient) { }ngOnInit() {}buttonNameJson = "Combine JSON";json1: File;json2: File;test: File;one = this.json1;two = this.json2;public combineJSON() {this.test = this.one;console.log(this.test);}}
If I just want to call up the content of one of the two imported JSON files, I always get the error "undefined".
What do I have to do so that I can use the individual JSON in JsonConverterComponent.ts?
答案1
得分: 3
ngModel指令不能用于input类型为file的元素，您需要通过以下方式对change事件做出响应：
<input (change)="onFileChange($event)" type="file" id="Json1" required><input (change)="onFileChange($event)" type="file" id="Json2" required>
然后在TypeScript文件中：
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");}
英文:
The ngModel directive can't be used on a input of type file, you have to react on the change event like this:
<input (change)="onFileChange($event)" type="file" id="Json1" required><input (change)="onFileChange($event)" type="file" id="Json2" required>
Then in the TypeScript file:
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");}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论