1

我正在 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 格式之间的区别。

4

1 回答 1

0

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

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

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

    }else{
        return;
    }
于 2019-03-25T10:52:12.037 回答