CODEWITHSUNDEEP
typescriptangular
royB
royB

Reputation: 12977

Angular 2 Binding array of data

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>

Upvotes: 1

Views: 5247

Answers (1)

Thierry Templier
Thierry Templier

Reputation: 202138

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

Upvotes: 2

Related Questions