如何在Angular 8中使用来自HTML输入的JSON文件?

huangapple go评论89阅读模式
英文:

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

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

JsonConverterComponent.TS

export class JsonConverterComponent implements OnInit {

  constructor(private http: HttpClient) { }

  ngOnInit() {
  }

  buttonNameJson = &quot;Combine JSON&quot;;
  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:

&lt;input (change)=&quot;onFileChange($event)&quot; type=&quot;file&quot; id=&quot;Json1&quot; required&gt;

&lt;input (change)=&quot;onFileChange($event)&quot; type=&quot;file&quot; id=&quot;Json2&quot; required&gt;

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, &quot;UTF-8&quot;);
}

huangapple
  • 本文由 发表于 2020年1月6日 20:41:01
  • 转载请务必保留本文链接:https://go.coder-hub.com/59612312.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定