Angular2 : Bind view with callback variable

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 bindcsvFileParseLog 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 ?

it would be really helpful if you could share the code you've got so far. :) — toskv
– toskv, Commented Jan 23, 2017 at 17:49

Günter Zöchbauer · Accepted Answer · 2017-01-23 18:07:20Z

2

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();
       },

answered Jan 23, 2017 at 18:07

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular2 : Bind view with callback variable

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related