Angular 2 Binding array of data

Question

I'm trying to pass Array of some DataObject between 2 components, But when i'm binding data the the Array property nothing is happening.

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

data-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 template of 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>

expected to fire up DataTableComponent when binding but nothing happens. data Array is not empty

data-table.component.ts

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

Have you tried to retain context this via using arrow function like myReader.onload = (e) => {? — yurzui
– yurzui, Commented Jul 7, 2016 at 20:56

Thierry Templier · Accepted Answer · 2016-07-07 21:14:35Z

2

I think that you don't set correctly your data within the AppComponent.

You could try the following. This way, you will set the data in the data property of your component:

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

answered Jul 7, 2016 at 21:14

Thierry Templier

203k44 gold badges407 silver badges365 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular 2 Binding array of data

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related