html - Visa CSV-fil som en tabell - Angular/TS

Jag kan framgångsrikt ladda upp en (icke-tom) CSV-fil, och tabellen anpassar sig efter storleken på datamängden. Dock visar tabellen CSV-filen som tom. Är det något jag möjligen missar här?

Jag använder Angular 12, Npm 9, och jag använder ngx-csv-parser 0.0.7

Kan detta vara ett problem med den specifika CSV-filen, eller med koden? Var snäll och ha tålamod eftersom jag är ganska ny på detta.

Jag är glad att klargöra eventuella oklarheter och tillhandahålla kodexempel vid behov.

app.component.ts:

import { FormBuilder, FormGroup, FormArray } from '@angular/forms';
import { Component, ViewChild } from '@angular/core';
import { NgxCsvParser, NgxCSVParserError } from 'ngx-csv-parser';

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

export class AppComponent {
  public feedbackArray: FormArray;
  public feedbackForm: FormGroup;

  constructor(private fb: FormBuilder) {
    this.feedbackForm = this.fb.group({
       feedbackArray: this.fb.array([ this.createFeedback() ]),
    });
  }

  get feedbackControls() {
    return this.feedbackForm.get('feedbackArray')['controls'];
  }

  createFeedback(): FormGroup {
    return this.fb.group({
      feedback: '',
    });
  }

  removeFeedback(i: number) {
    this.feedbackArray.removeAt(i);
  }

  addFeedback(): void {
    this.feedbackArray = this.feedbackForm.get('feedbackArray') as FormArray;
    this.feedbackArray.push(this.createFeedback());
  }
}

export class CsvParser {
  csvRecords: any[] = [];

  constructor(private ngxCsvParser: NgxCsvParser) {}

  @ViewChild('fileImportInput') fileImportInput: any;

  fileChangeListener($event: any): void {
    const files = $event.srcElement.files;

    this.ngxCsvParser.parse(files[0], { header: true, delimiter: ',' })
      .pipe().subscribe((result: Array<any>) => {
        console.log('Result', result);
        this.csvRecords = result;
      }, (error: NgxCSVParserError) => {
        console.log('Error', error);
      });
  }
}

Tabell i min app.component.html:

        <div class="panel panel-default" id="main-right-panel">
            <div class="csv-file-chooser-section file-select">
                <label>Upload CSV File:&nbsp;</label>
                <input
                type="file" 
                #fileImportInput 
                name="File Upload"
                id="csvFileUpload" 
                (change)="fileChangeListener($event)"
                accept=".csv" 
                data-testid="importCSV"/>
            </div>
            
            <table>
                <thead>
                  <tr>
                    <th>#</th>
                    <th>Identifier</th>
                    <th>Full Name</th>
                    <th>Email Address</th>
                    <th>Status</th>
                    <th>Grade</th>
                    <th>Maximum Grade</th>
                    <th>Grade can be changed</th>
                    <th>Last modified submission</th>
                    <th>Online text</th>
                    <th>Last modified grade</th>
                    <th>Feedback comments</th>
                  </tr>
                </thead>
                <tbody>
                    <tr *ngFor="let csvData of csvRecords;let i = index;">
                        <td>{{i+1}}</td>
                        <td>
                            <span>{{csvData.identifier}}</span>
                        </td>
                        <td>
                            <span>{{csvData.fullName}}</span>
                        </td>
                        <td>
                            <span>{{csvData.emailAddress}}</span>
                        </td>
                        <td>
                            <span>{{csvData.status}}</span>
                        </td>
                        <td>
                            <span>{{csvData.grade}}</span>
                        </td>
                        <td>
                            <span>{{csvData.maximumGrade}}</span>
                        </td>
                        <td>
                            <span>{{csvData.gradeCanBeChanged}}</span>
                        </td>
                        <td>
                            <span>{{csvData.lastModifiedSubmission}}</span>
                        </td>
                        <td>
                            <span>{{csvData.onlineText}}</span>
                        </td>
                        <td>
                            <span>{{csvData.lastModifiedGrade}}</span>
                        </td>
                        <td>
                            <span>{{csvData.feedbackComments}}</span>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { NgxCsvParserModule } from 'ngx-csv-parser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ReactiveFormsModule } from '@angular/forms';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    ReactiveFormsModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    FormsModule,
    NgxCsvParserModule, 
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Utdrag från CSV-fil, 53 rader lång: https://i.sstatic.net/yPrIj.png

Svar #1

Försök indexera med det exakta värdet i kolumnrubriken, t.ex.

<td>
<span>{{csvData["Identifier"]}}</span>
</td>
<td>
<span>{{csvData["Full name"]}}</span>
</td>
<td>
<span>{{csvData["Email address"]}}</span>
</td>