Question

作为学习课程的一部分，我将在Angular中安装一个CRUD应用程序，并使用魔杖从文件（将接受.json /.xml格式）填充列表。我设法从文件和在控制台中打印，但我不知道如何与模板和服务进行通信，这些模板和服务最终将处理并打印出所需的输出。

到目前为止，我已遵循本指南https://www.youtube.com/watch?v=3zpdnujI_B0。这是代码的https://github.com/michaelcheng429/angular-tutorial的最终存储库。我跳过了动画部分，因为它不是我现在想要学习的东西。（现在，我有一个正在从in-memory-web-api中读取的服务，并且该服务有助于我对创建/读取/更新/删除功能的http请求）

在product.component.html中，我有接受json和xml的输入类型：

<div>
    Select file:
    <input type="file" accept='.json,.xml' (change)="changeListener($event)">
</div>

对于阅读部分，我使用了FileReader，它在更改时被调用（在products.component.ts内部）：

changeListener($event) : void {
    this.readThis($event.target);
  }

  readThis(inputValue: any) : void {
    var file:File = inputValue.files[0]; 
    var myReader:FileReader = new FileReader();

    myReader.onloadend = function(e){
      console.log(myReader.result);
    }

    myReader.readAsText(file);
 }

在读取文件时，我不知道如何与产品服务/模板交流我的信息并处理json格式和xml格式之间的差异。

Answer 1

尝试

 myReader.onloadend = function(e){
      var json = JSON.parse(myReader.result);
 json.forEach(element => {
          console.log(element.yourProperty);
        });
    }

希望有帮助

Answer 2

您可以按文件类型进行检查
在这里，您已经声明var file:File = inputValue.files[0]; 在这些file变量中，您可以获得所有文件信息，您只需要在此处查看

    if(file && file.type === 'text/xml'){

    }else if(file && file.type === 'application/json'){

    }else{
        return;
    }

从.json / .xml读取数据并在Angular中填充列表

2 个答案: