代码问题

我正在使用Angular 6，它是我的新手，尝试了8个多小时来读取我在本地拥有的csv文件，并根据写在csv上的信息填充数组。 csv的值用逗号隔开，行用换行符隔开。 有人可以帮我吗，我堆积如山...

这是TeacherModel.ts

export class TeacherModel {
    id:number;
    name: string;
    lastName: string;
    nikName: string;
    id1: string;
    Sunday:number;
    Monday :number;
    Tuesday :number;
    Wednesday:number; 
    Thursday :number;
    Friday :number;

    Sunday1:number;
    Monday1 :number;
    Tuesday1 :number;
    Wednesday1:number; 
    Thursday1 :number;
    Friday1 :number;

}

问题答案

使用这种方式 将您的csv文件放入素材资源文件夹

import { HttpClient } from "@angular/common/http";

export class AppComponent  {
  public userArray: User[] = [];
  constructor(private http: HttpClient){
    this.http.get('assets/csv.csv',{responseType: 'text'})
    .subscribe(
        data => {
            let csvToRowArray = data.split("\n");
            for (let index = 1; index < csvToRowArray.length; index++) {
              let row = csvToRowArray[index].split(",");
              this.userArray.push(new User( parseInt( row[0],10),row[1],row[2].trim()));
            }
            console.log(this.userArray);
        },error => {
            console.log(error);
        }
    );
  }
}

export class User{
  id: number;
  name: String;
  lastName: String;

  constructor(id: number,name: String,lastName: String){
    this.id = id;
    this.name = name;
    this.lastName = lastName;
  }
}

Stackblitz example

您可以尝试Papa Parser：

  

npm安装ngx-papaparse @ 4-保存

示例：

const resultFile = httpClient.get('/assets/test-data.csv',{responseType: 'text'}).subscribe(file => {
      file.split(/[\r\n]+/).forEach(line => {
        this.papa.parse(line,{
          complete: (result) => {
            console.log('Parsed: ',result);
          }
        });
      });
    });

考虑将文件放置在资产目录中。我只是在控制台上打印阵列，您可以做任何您想做的事。

PapaParse是Java的一个很好的CSV解析器，它将帮助您从本地或远程路径读取CSV，但是再次需要将其构造到您的类中，并且再次需要一个像https://www.npmjs.com/package/class-transformer这样的包，除非您想编写自己的个人实现以将json响应转换为模态类。

现在，问题是您的CSV有多大？您是否真的要使用上述这些库，如果您只想将本地CSV从HTTPGET转换为类，那么单独使用class-transformer就足够了，但是如果您想要对大型csv文件进行多次操作，然后也使用papa解析，请参考https://www.papaparse.com/docs#config以获得papa解析提供的所有选项。

请在下面找到我个人对papa parse和csv转换器的实现，这两个库。

 import * as jsonParse from 'papaparse';
 import { plainToClass } from 'class-transformer';

 fetchDataFromCSV() {
     return this.httpClient.get(this.csvPath,{ responseType: 'text' })
     .toPromise()
     .then(res => this.getPersons(res));
  }

 getPersons(res): Person[] {

     const csvData = res;
     const parsedData = jsonParse.parse(csvData,this.parseConfig).data;

      // parseConfig is papa parse option object,refer https://www.papaparse.com/docs#config for all posible parsing options.

     this.headerRow = parsedData[0]; // if you want to do something with header row
     const allPersons = plainToClass(Person,parsedData as Object[]);
     return allPersons;
 }

如果觉得前端之家所整理的内容很不错的话，欢迎点击下方分享按钮，转发给身边开发程序员好友。