javascript - Angular2:将 View 与回调变量绑定(bind)

在我的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 => { ... }
       );
  };
}

我试图通过将我的值传递给csvFileParseLog来绑定items到我的视图...尽管没有成功。

这是我的componenet.html：

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

如何将这些内容显示到我的视图组件中并使用ngFor对其进行循环？

最佳答案

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