角度加载 file.json 并转换为对象类答案

【问题标题】：Angular load file.json and convert to object class角度加载 file.json 并转换为对象类
【发布时间】：2018-04-30 20:29:36
【问题描述】：

我的应用加载了用户电脑的file.json：

app.component.html

  <div class="file btn btn-lg btn-primary">
    Upload
    <input type="file" class="upload" (change)="changeListener($event.target.files)">
  </div>

在我的 app.component.ts

  user: User;
  userArray: Array<User>;
  fileList: Array<any>;

  ngOnInit() {
   this.user = new User();
   this.userArray= Array<User>();
   this.fileList= Array<any>();
  }

THEN 接收文件的方法：

  public changeListener(files: FileList) {
    if (files && files.length > 0) {
      let file: File = files.item(0);

      let reader: FileReader = new FileReader();
      reader.readAsText(file);
      reader.onload = (e) => {
        let loadFile: string = reader.result;
        JSON.stringify(loadFile)
        this.fileList = loadFile.split('\r\n');

    if (this.fileList.length > 0) {
      for (const i of this.fileList) {
        if (i !== null) {

          this.user = i; //--I THINK HERE IS MY PROBLEM--
          this.userArray.push(this.user); //----HERE IS UNDEFINED

          console.log('user - ', this.user); 
        } else {
          console.log('NULL');
        }
      }
        console.log('userArray - ', this.userArray.length); //---BUT HERE SHOW SIZE OF .JSON LOADED
      }
    }
  }

我的问题是：喜欢在用户对象中转换“i”吗？还是用户数组中的fileList？

我的 user.class 具有与 json.file 相同的属性...我在这里看到很多响应，但没有任何效果。

我的 json 文件是一个列表：

{"DATE ":"22/04/2018","HOUR ":"03:00:55","YEAR ":2014,"NUM_TURN (*) ":1,"DESC_E (*) ":"Gerais 2014","SIGLA_UF ":"SE","SIGLA_UE (*) ":"SE", ...e more others 15 properties}

【问题讨论】：

您将“i”直接分配给您的 User 类不应该是这样的 this.user.firstName= i;
我的 .json 文件是一个包含很多内容的列表：{"DATE":"22/04/2018","HOUR":"03:00:55","YEAR":2014, "NUM_TURN () ":1,"DESC_E () ":"Gerais 2014","SIGLA_UF ":"SE","SIGLA_UE (*) ":"SE", ...e 更多其他 15 个属性}

标签： javascript json angular typescript angularfire

【解决方案1】：

你不是用fileList代替this.fileList吗？

无论如何我都会尝试投i：

this.user = i as User;

【讨论】：

sry about fileList 在我的真实代码中这个区域是在其他通过参数传递 fileList 的方法中，但我现在修复了。 this.user = i 作为用户； console.log('name - ', this.user.name);未定义

【解决方案2】：

fileList 是一个字符串数组，因此您需要将i，它是一个字符串（尽管在本例中为any 类型）转换为一个json 对象：

this.user = JSON.parse(i);

【讨论】：