Angular 使用带Ionic 4的Papa解析从CSV数据导入特定列

我有一些代码使用Papa Parse插件将CSV数据拉入我的Ionic 4应用程序，但我想拉入特定的数据字段-不确定如何拉入

例如，如果我只想显示“First Name”和“Last Name”而不是所有字段，该怎么办

dummyData.csv

Date,"First Name","Last Name","Email","Amount","Currency","InvoiceID","Country"
08.22.2019,"Simon","Grimm","saimon@devdactic.com","50,00","EUR","0001","GER"
08.21.2019,"Simon","Grimm","saimon@devdactic.com","45,00","EUR","0002","GER"
08.19.2019,"Simon","Grimm","saimon@devdactic.com","40,00","EUR","0003","GER"
08.18.2019,"Simon","Grimm","saimon@devdactic.com","35,00","EUR","0004","GER"
08.17.2019,"Simon","Grimm","saimon@devdactic.com","30,00","EUR","0005","GER"
08.16.2019,"Simon","Grimm","saimon@devdactic.com","25,00","EUR","0006","GER"

TS脚本页

import { Component, OnInit } from '@angular/core';
import { Papa } from 'ngx-papaparse';
import { Platform } from '@ionic/angular';
import { File } from '@ionic-native/file/ngx';
import { SocialSharing } from '@ionic-native/social-sharing/ngx';
import { HttpClient } from '@angular/common/http';


@Component({
  selector: 'app-examination-test',
  templateUrl: './examination-test.page.html',
  styleUrls: ['./examination-test.page.scss'],
})

export class  ExaminationTestPage {
  csvData: any[] = [];
  headerRow: any[] = [];

  constructor(
    private http: HttpClient,
    private papa: Papa,
    private plt: Platform,
    private file: File,
    private socialSharing: SocialSharing,
  ) {
    this.loadCSV();
  }

  private loadCSV() {
    this.http
      .get('./assets/Sins.csv', {
        responseType: 'text'
      })
      .subscribe(
        data => this.extractData(data),
        err => console.log('something went wrong: ', err)
      );
  }

  private extractData(res) {
    let csvData = res || '';

    this.papa.parse(csvData, {
      complete: parsedData => {
        this.headerRow = parsedData.data.splice(0, 1)[0];
        this.csvData = parsedData.data;
      }
    });
  }

  exportCSV() {
    let csv = this.papa.unparse({
      fields: this.headerRow,
      data: this.csvData
    });

    if (this.plt.is('cordova')) {
      this.file.writeFile(this.file.dataDirectory, 'Sins.csv', csv, {replace: true}).then( res => {
        this.socialSharing.share(null, null, res.nativeURL, null).then(e =>{
          // Success
        }).catch(e =>{
          console.log('Share failed:', e)
        });
      }, err => {
        console.log('Error: ', err);
      });

    } else {
      // Dummy implementation for Desktop download purpose
      var blob = new Blob([csv]);
      var a = window.document.createElement('a');
      a.href = window.URL.createObjectURL(blob);
      a.download = 'newdata.csv';
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
    }
  }

  trackByFn(index: any, item: any) {
    return index;
  }
}

HTML脚本

<ion-header>
  <ion-toolbar color="primary">
    <ion-title>
      Devdactic CSV
    </ion-title>
    <ion-buttons slot="start">
      <ion-button (click)="exportCSV()">
        Export
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content scrollX="true">
  <table border="1" class="data-table">
    <tbody>
      <tr>
        <td *ngFor="let header of headerRow" text-center>
          <b>{{ header }}</b>
        </td>
      </tr>
      <tr *ngFor="let row of csvData; let i = index">
        <td
          *ngFor="let data of row; let j = index; trackBy: trackByFn"
          class="data-col"
        >
          <ion-input type="text" [(ngModel)]="csvData[i][j]"></ion-input>
        </td>
      </tr>
    </tbody>
  </table>
</ion-content>

Devdactic CSV
出口
{{header}}

检查以下内容后：

private extractData(res) {
    let csvData = res || '';

    this.papa.parse(csvData, {
      complete: parsedData => {
        this.headerRow = parsedData.data.splice(0, 1)[0];
        this.csvData = parsedData.data;
      }
    });
  }

将结果留给您，它似乎将每一行作为数组的条目留给您

我要做的是两件事，这取决于具体情况，但这假设csv每次都以相同的8列结束。 首先是一个接口：

interface InvoiceDetails {
date: moment();
firstName: string; 
lastName: string;
email: string;`enter code here`
amount: number;
currency: string
invoiceId: string;
country: string;
}

然后，为了方便起见，我会添加一个枚举：

enum Column {
Date = 0,
FirstName = 1,
LastName = 2,
Email = 3,
Amount = 4,
Currency = 5,
InvoiceID = 6,
Country = 7
}

然后我会在extractData方法中添加一个方法：

  private extractData(res) {
    let csvData = res || '';

    this.papa.parse(csvData, {
      complete: parsedData => {
        this.headerRow = parsedData.data.splice(0, 1)[0];
        this.csvData = this.remapToInvoiceDetails(parsedData.data);
      }
    });
  }

然后remapToInvoiceDetails将如下所示：

remapToInvoiceDetails(csvData: string[]) {
 const invoices: InvoiceDetails[] = [];
 for (const data of csvData) {
  invoices.push({
   date: data[Column .Date],
   firstname: data[Column .FirstName],
   lastName: data[Column .LastName],
   email: data[Column .Email],
   amount: data[Column .Amount],
   currency:  data[Column .Currency],
   invoiceID: data[Column .InvoiceID],
   country: data[Column .Country],
   });
  }
 return invoices;
 }

通过这样做，您可以在允许您使用intellisense的结构中获得数据，并且您可以更轻松地选择所需的属性。也就是说，假设您现在这样定义csvData：

csvData: Invoices[] = [];   

但我现在只能称之为发票或更合适的名称，因为现在它是结构化的。 注意：假设您总是得到8列，并且没有空检查，因此也需要添加空检查。

检查内容后：

private extractData(res) {
    let csvData = res || '';

    this.papa.parse(csvData, {
      complete: parsedData => {
        this.headerRow = parsedData.data.splice(0, 1)[0];
        this.csvData = parsedData.data;
      }
    });
  }

将结果留给您，它似乎将每一行作为数组的条目留给您

我要做的是两件事，这取决于具体情况，但这假设csv每次都以相同的8列结束。 首先是一个接口：

interface InvoiceDetails {
date: moment();
firstName: string; 
lastName: string;
email: string;`enter code here`
amount: number;
currency: string
invoiceId: string;
country: string;
}

然后，为了方便起见，我会添加一个枚举：

enum Column {
Date = 0,
FirstName = 1,
LastName = 2,
Email = 3,
Amount = 4,
Currency = 5,
InvoiceID = 6,
Country = 7
}

然后我会在extractData方法中添加一个方法：

  private extractData(res) {
    let csvData = res || '';

    this.papa.parse(csvData, {
      complete: parsedData => {
        this.headerRow = parsedData.data.splice(0, 1)[0];
        this.csvData = this.remapToInvoiceDetails(parsedData.data);
      }
    });
  }

然后remapToInvoiceDetails将如下所示：

remapToInvoiceDetails(csvData: string[]) {
 const invoices: InvoiceDetails[] = [];
 for (const data of csvData) {
  invoices.push({
   date: data[Column .Date],
   firstname: data[Column .FirstName],
   lastName: data[Column .LastName],
   email: data[Column .Email],
   amount: data[Column .Amount],
   currency:  data[Column .Currency],
   invoiceID: data[Column .InvoiceID],
   country: data[Column .Country],
   });
  }
 return invoices;
 }

通过这样做，您可以在允许您使用intellisense的结构中获得数据，并且您可以更轻松地选择所需的属性。也就是说，假设您现在这样定义csvData：

csvData: Invoices[] = [];   

但我现在只能称之为发票或更合适的名称，因为现在它是结构化的。

---

注意：假设您总是得到8列，并且没有空检查，因此也需要添加。

我为导出按钮找到了答案-只是不在显示屏上我为导出按钮找到了答案-只是不在显示屏上