

angularの勉強をしています。  
csvファイルを下記のソースコードでアップロードするように作成しましたが、  
特に画面何も表示されず真っ白な状態です。  
バージョンによって表示されないでしょうか。

参考URL  
[Angular Upload Readcsv | stackblitz](https://stackblitz.com/edit/angular-
upload-readcsv?file=src%2Fapp%2Fapp.component.ts)  
[Read CSV and convert JSON Data in
Angular](https://www.eduforbetterment.com/read-csv-and-convert-json-data-in-
angular/)

**app.component.ts**

[code]

    /*
    https://www.eduforbetterment.com/
    */
    import { Component, VERSION, ViewChild } from '@angular/core';
    
    export class CsvData {
        public id: any;
        public min: any;
        public max: any;
        public score: any;
    }
    
    @Component({
      selector: 'my-app',
      templateUrl: './app.component.html',
      styleUrls: [ './app.component.css' ]
    })
    export class AppComponent  {
      name = 'Angular ' + VERSION.major;
      public records: any[] = [];
      @ViewChild('csvReader') csvReader: any;
      jsondatadisplay:any;
    
      uploadListener($event: any): void {
    
        let text = [];
        let files = $event.srcElement.files;
    
        if (this.isValidCSVFile(files[0])) {
    
          let input = $event.target;
          let reader = new FileReader();
          reader.readAsText(input.files[0]);
    
          reader.onload = () => {
            let csvData = reader.result;
            let csvRecordsArray = (<string>csvData).split(/\r\n|\n/);
    
            let headersRow = this.getHeaderArray(csvRecordsArray);
    
            this.records = this.getDataRecordsArrayFromCSVFile(csvRecordsArray, headersRow.length);
          };
    
          reader.onerror = function () {
            console.log('error is occured while reading file!');
          };
    
        } else {
          alert("Please import valid .csv file.");
          this.fileReset();
        }
      }
    
      getDataRecordsArrayFromCSVFile(csvRecordsArray: any, headerLength: any) {
        let csvArr = [];
    
        for (let i = 1; i < csvRecordsArray.length; i++) {
          let curruntRecord = (<string>csvRecordsArray[i]).split(',');
          if (curruntRecord.length == headerLength) {
            let csvRecord: CsvData = new CsvData();
            csvRecord.id = curruntRecord[0].trim();
            csvRecord.min = curruntRecord[1].trim();
            csvRecord.max = curruntRecord[2].trim();
            csvRecord.score = curruntRecord[3].trim();
            csvArr.push(csvRecord);
          }
        }
        return csvArr;
      }
    
    //check etension
      isValidCSVFile(file: any) {
        return file.name.endsWith(".csv");
      }
    
      getHeaderArray(csvRecordsArr: any) {
        let headers = (<string>csvRecordsArr[0]).split(',');
        let headerArray = [];
        for (let j = 0; j < headers.length; j++) {
          headerArray.push(headers[j]);
        }
        return headerArray;
      }
    
      fileReset() {
        this.csvReader.nativeElement.value = "";
        this.records = [];
        this.jsondatadisplay = '';
      }
    
      getJsonData(){
        this.jsondatadisplay = JSON.stringify(this.records);
      }
    
    
    }
    
[/code]

**app.component.html**

[code]

    <div class="container">
    
      <div class="card">
        <div class="card-header">
          Upload csv to read
        </div>
        <div class="card-body">
    
          <input type="file" #csvReader name="Upload CSV" id="txtFileUpload" (change)="uploadListener($event)"
            accept=".csv" />
    
        </div>
      </div>
    
      <a href="javascript:;" *ngIf="records.length > 0" (click)="getJsonData()" class="btn btn-primary">Convert Json </a>
    
      <a href="javascript:;" *ngIf="records.length > 0" (click)="fileReset()" class="btn btn-primary">Reset </a>
    
      {{jsondatadisplay}}
      <table class="table" *ngIf="records.length > 0">
        <thead class="thead-dark">
          <tr>
            <th scope="col">#</th>
            <th scope="col">Min</th>
            <th scope="col">Max</th>
            <th scope="col">Score</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let record of records;let i = index;">
            <th scope="row">{{record.id}}</th>
            <td>{{record.min}}</td>
            <td>{{record.max}}</td>
            <td>{{record.score}}</td>
          </tr>
    
        </tbody>
      </table>
    </div>
    
[/code]

**app.component.css**

[code]

    p {
      font-family: Lato;
    }
    .table,.container{
      margin-top:20px; 
    }
    .btn{
      margin-right:20px; 
      margin-top: 20px;
    }
    
[/code]


CC BY-SA 4.0
2022-09-05T07:13:11.263
90936
2022-09-05T07:53:51.953
2022-09-05T07:53:51.953
3060
18859
question
angularjs angular
angular 13でcsvファイルをアップロードする方法