Angular 2數據綁定數組

Question

我試圖通過Array之間的一些DataObject之間的2個組件，但是當我綁定數據的Array屬性什麼都沒有發生。

app.component.ts

import {Component} from '@angular/core'; 
import {DataObject} from "./models/data-object"; 
import {DataTableComponent} from "./data-table.component"; 

@Component({ 
    selector: 'my-app', 
    templateUrl: 'app/templates/main.html', 
    directives: [DataTableComponent] 

}) 

export class AppComponent { 
    filesToUpload: Array<File>; 
    data: Array<DataObject>; 

    constructor() { 
     this.filesToUpload = []; 
    } 

    //Handling uploading a file 
    fileChangeEvent(fileInput: any) { 

     let myReader:FileReader = new FileReader(); 

     myReader.onload = function(e) { 
      //this is working 
      this.data = extractJsonDataToObject(fileInput); 
     } 
     ... 
    } 
} 

數據table.component.ts

import { Component, Input } from '@angular/core'; 
import {DataObject} from "./models/data-object"; 

@Component({ 
    selector: 'data-table', 
    templateUrl: 'app/templates/data-table.html' 
}) 

export class DataTableComponent { 
    @Input() 
    data: Array<DataObject>; 
} 

main.html中模板的 app.component.ts

<input type="file" (change)="fileChangeEvent($event)" placeholder="Upload file..." /> 
<button type="button" (click)="upload()">Upload</button> 
<data-table [data]="data"></data-table> 

預期會在綁定時觸發DataTableComponent，但沒有任何反應。 data Array不爲空

數據table.component.ts

<table>... 
    <tr *ngFor="let obj of data"> 
    .... 
    </tr> 
    ... 
<table> 

Answer 1

我認爲你沒有設置正確的AppComponent內的資料。

您可以嘗試以下操作。這樣，你會在你的組件的data屬性中設置的數據：

myReader.onload = (e) => { 
    this.data = extractJsonDataToObject(fileInput); 
}