Question

我试图在两个组件之间传递一些Array的{{1}}，但是当我绑定数据时，Array属性什么也没发生。

app.component.ts

DataObject

数据-table.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); 
        }
        ...
    }
}

app.component.ts 的

main.html 模板

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>;
}

预计在绑定时启动DataTableComponent但没有任何反应。 <input type="file" (change)="fileChangeEvent($event)" placeholder="Upload file..." /> <button type="button" (click)="upload()">Upload</button> <data-table [data]="data"></data-table>不为空

数据-table.component.ts

data Array

Answer 1

我认为您未在AppComponent内正确设置数据。

您可以尝试以下方法。这样，您将在组件的data属性中设置数据：

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

Angular 2绑定数据数组

1 个答案: