Papa Parse-在解析CSV文件后使用JSON填充表格

时间:2018-09-10 16:43:28

标签: html angular typescript papaparse

我正在向Web应用程序添加新功能,因此用户可以上载.csv文件并将其发送到数据库。 上传时,我想以JSON格式读取数据并将其显示在表格中,以便用户可以检查所有内容是否都应满足要求。

问题在于应用程序可以使用Papa Parse完美地读取文件,但它不会填充表,并且不会显示任何数据...而且我也没有错误响应。

我在做什么错了?

component.ts

import { Component, OnInit } from '@angular/core';
   import Papa = require('papaparse');

   @Component({
     selector: 'app-formulario-csv',
     templateUrl: './formulario-csv.component.html',
     styleUrls: ['./formulario-csv.component.css']
   })

   export class FormularioCsvComponent implements OnInit {
     tableData: any = null;
     constructor() {  }

     ngOnInit() {
     }

     csv2Array(fileInput) {
       Papa.parse(fileInput.target.files[0], {
         skipEmptyLines: true,
         header: true,
         complete: function(results) {
           this.tableData = results.data;
           console.log(this.tableData);
         }
       });
     }
   }

component.html

<!DOCTYPE html>

  <h2>Import CSV</h2>

  <input type="file" accept=".csv" (change)="csv2Array($event)">
  <table *ngIf="tableData">
      <tr>
        <th>CD</th>
        <th>NOME</th>
        <th>EMAIL</th>
      </tr>
      <tr *ngFor="let row of tableData">
        <td>{{ row.cd }}</td>
        <td>{{ row.nome }}</td>
        <td>{{ row.email}}</td>
      </tr>
  </table>

Console output

0 个答案:

没有答案