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

我试图通过将我的值传递给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();
       },