英文:
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");
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论