Angular2：コールバック変数を持つバインドビュー

Question

私のangular2プロジェクトでは、私はFileReaderでcsvファイルを読みました。 onloadendコールバックの後、私は自分のcsvファイルの内容を含む変数を持っています。

ここに私の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 => { ... } 
     ); 
    }; 
} 

私は成功whithout ... itemsに私の値を渡すことで、私の見解にcsvFileParseLogをバインドしようとしました。ここで

は私componenet.html：

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

どのように私はngForとその上に私のビューコンポーネントとループにこのコンテンツを表示することができますか？

Answer 1

r.onloadend = function(loadedEvt) { 

r.onloadend = (loadedEvt) => { 

そうthisする必要がありますが、その関数内で動作しません。

してからちょうどちょうどドロップ

this.csvFileParseLog.push(newItems); 

とを使用let csvFileParseLog = this.csvFileParseLog;

また

constructor(private cdRef:ChangeDetectorRef) {} 

を注入し、それを呼び出す必要がありますsubscribe()

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