Рендеринг CSV, проанализированный с Papaparse в HTML

Question

Я работаю с Ionic 3, и мне нужно визуализировать CSV в моем приложении.Я использовал Papaparse, чтобы прочитать файл, и я получил их с console.log(this.csvData).

Но я не могу показать их в файле HTML (пробел в пустом месте должен показать таблицу с информацией).Все, что мне нужно, это таблица с информацией о локальном хранилище CSV-файла, и я не знаю, правильно ли я использовал *ngFor с моим массивом csvData, потому что кажется, что headerRow пуст при вызове let row of headerRow в *ngFor,Я использую Ionic 3 с Angular 5.

Это мой файл .ts:

export class myPage {
csvData: any[] = [];
headerRow: any[] = [];
url = 'assets/json/data.csv'; 
constructor(public navCtrl: NavController, public navParams:
    NavParams, private httpClient: HttpClient, 
    public modalController: ModalController) {
        this.extract() 
}
private extract(){
Papa.parse(this.url, {
  download: true,
  complete: function(results) {
    this.csvData=results.data;  
    this.headerRow = this.csvData[0]; 
    this.csvData.splice(0, 1); 
    console.log(this.csvData);  
    console.log(this.headerRow);  
    }
});
}
}

Это часть моего HTML-файла:

<ion-item>
<ion-scroll  class="data-scroll">
    <table  class="data-table">
        <tr>
            <td *ngFor="let row of headerRow; let i = index" text-center><b> {{ row }} </b></td>
          </tr>    
          <tr *ngFor="let row of csvData; let i = index">
            <td *ngFor="let data of row; let j = index; trackBy: trackByFn">
              <ion-input type="text" [(ngModel)]="csvData[i][j]"></ion-input>
            </td>
        </table>
      </ion-scroll>