Angular2：将视图与回调变量绑定

Question

In my angular2 project, I read a csv file with FileReader. After the onloadend callback I have a variable which contain the content of my csv file.

Here my component.ts :

items: Array<any> = []

...

readCSV (event) {
   let csvFileParseLog = this.csvFileParseLog;
   r.onloadend = function(loadedEvt) {
       devicesFile = files[0];
       let csvFileParseLog = [];
       parseDevicesCsvFile(contents) // One of my function which is an observable
           .subscribe(newItems=> {
               csvFileParseLog.push(newItems); // My result
           },
           exception => { ... }
       );
  };
}

I tried to bind csvFileParseLog to my view by passing my value into items ... whithout success.

Here my componenet.html :

<div *ngFor="let c of csvFileParseLog">
    {{ c.value }}
</div>

How can I display this content into my view component and loop on it with ngFor ?

Answer 1

r.onloadend = function(loadedEvt) {

should be

r.onloadend = (loadedEvt) => {

otherwise this won't work within that function.

and then just use

this.csvFileParseLog.push(newItems);

and just drop let csvFileParseLog = this.csvFileParseLog;

You also might need to inject

constructor(private cdRef:ChangeDetectorRef) {}

and call it in subscribe()

       .subscribe(newItems=> {
           this.csvFileParseLog.push(newItems); 
           this.cdRef.detectChanges();
       },