angular - *ngFor 在我使用 papa.parse 推入数组后不更新视图

问题描述

import { Component, OnInit, EventEmitter, Output, ChangeDetectorRef } from '@angular/core';
import { Papa } from 'ngx-papaparse';
import {Model} from "./model";


@Component({
  selector: 'app-table',
  templateUrl: './table.component.html',
  styleUrls: ['./table.component.scss']
})
export class TableComponent implements OnInit {
  papa : Papa;
  file : File;
  options  = {
    data: [],
    complete :   function(results, file){
       for(var i = 0; i < results.data.length; i++){
          this.data.push(results.data[i]);
       }
       console.log(this.data);
      }
    }
 

onUpload(event){
  this.file = event.target.files[0];
  this.papa.parse(this.file, this.options);
}

  
  
  constructor() {
     
  }

  ngOnInit() {
    this.papa = new Papa();
  }
  

}

<input type="file" (change)="onUpload($event)"(emitter)="emitted($event)">

<table>
    <thead>
        <th>Franchise</th>
        <th>Starting ELR</th>
        <th>1st Month ELR</th>
        <th>2nd Month ELR</th>
        <th>3rd Month ELR</th>
        <th>ELR Increase Average</th>
        <th>Difference</th>
    </thead>
    <tbody>
        <tr>
            <td>DOMESTIC</td>
            <td>123.29</td>
            <td>128.62</td>
            <td>129.57</td>
            <td>129.86</td>
            <td>129.42</td>
            <td>6.13</td>
        </tr>
        <tr *ngFor = "let data of options.data">
            <td>{{data[0]}}</td>
            <td>{{data[1]}}</td>
            <td>{{data[2]}}</td>
            <td>{{data[3]}}</td>
            <td>{{data[4]}}</td>
            <td>{{data[5]}}</td>
            <td>{{data[6]}}</td>
        </tr>
    </tbody>
</table>

我有一个带有 csv 文件的输入标签。文件上传后，我使用 papa.parse 将其转换为 json。然后我将它全部推入一个数组。在我的 html 中，我使用 ngFor 指令为从 papa.parse 返回的每个数组输出一个表行。但是，由于某种原因，角度 *ngFor 不会更新视图以反映添加的数据。我知道数据在数组中，因为我在控制台中记录它没有问题。有人可以帮我吗？

标签： angularngfor

angular - *ngFor 在我使用 papa.parse 推入数组后不更新视图

问题描述

解决方案

推荐阅读