Question

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返回的每个数组输出一个表行。但是，由于某些原因，angular * ngFor不会更新视图以反映添加的数据。我知道数据在数组中，因为我在控制台中记录它没有问题。有人可以帮我吗？

Answer 1

当它调用完成时，它的范围可能会在您的papa对象内部改变，请使用箭头功能，这样您就不会更改它的范围

complete: (results, file) => { this.data = [...results]; }

* ng在使用papa.parse推入数组后不更新视图

1 个答案: