我想解析文件 csv 并使用 Angular 2 在表中显示数据

Question

我是 angular 2/4 的新手，我想解析一个 csv 文件并在表格中显示信息。我尝试了 sth，但数据显示在控制台中，我希望它们出现在表格的网页中。如果有人可以帮助我？

 selectFile(files: FileList) {
console.log(files);
if(files && files.length > 0) {
   let file : File = files.item(0); 
     let reader: FileReader = new FileReader();
     reader.readAsText(file);
     reader.onload = (e) => {
        let csv: string = reader.result;
        console.log(csv);
     }
  }

此功能在控制台中向我显示数据，如何在 HTML 中更改它

upload() {
  this.progress.percentage = 0;
    this.currentFileUpload = this.selectedFiles.item(0)
    this.uploadservice.pushFileToStorage(this.currentFileUpload).subscribe(event => {
      if (event.type === HttpEventType.UploadProgress) {
        this.progress.percentage = Math.round(100 * event.loaded / event.total);
      } else if (event instanceof HttpResponse) {
        console.log('File is completely uploaded!');
      }
    })
    this.selectedFiles = undefined
}

这个按钮上传文件的函数，当我添加选择文件功能时，按钮不再工作

Answer 1

首先，您需要将csv文件数据转换为可读格式。 为此，我建议使用csv解析器Papaparse。使用 npm install papaparse 转到站点安装 Papaparse

您也可以解析字符串和文件。

根据您的代码获取字符串

selectFile(files: FileList) {
console.log(files);
if(files && files.length > 0) {
    let file : File = files.item(0); 
    let reader: FileReader = new FileReader();
    reader.readAsText(file);
    reader.onload = (e) => {
        let csv: string = reader.result;
        Papa.parse(csv,{
            header: true,
            skipEmptyLines: true,
            complete: (result,file) => {
              console.log(result);
              this.dataList = result.data;
            }
         })
    }
  }
}

将数据分配到数据列表后

<table>
    <thead>
        <tr>
            <td> headers</td>
            <td> headers</td>
            <td> headers</td>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let record of dataList">
            <td> {{record.fieldName1}} </td>
            <td> {{record.fieldName2}} </td>
            <td> {{record.fieldName3}} </td>
        </tr>
    </tbody>
</table>

我已经用在线编辑器完成了这项任务，它的工作完美此处的示例代码希望这对你有用....