can't bind data to bootstrap table

[mrtibs2000]

I'm not sure what I'm doing wrong, but I can't seem to bind an array to the bootstrap table. Here's my code:

Status	Postage Amount	Fees Amount	Total Amount
{{label.status}}	{{label.postage_amount}}	{{label.fees_amount}}	{{label.total_amount}}

labels is defined as following in my component.ts file: labels = [ { status: "manifested", postage_amount: 1.71, fees_amount: 0, total_amount: 1.71 }];

Whatever variable I define in the component.ts file, it doesn't seem to "show" within the table. It does show outside the table.

[alexandru-paduraru]

@mrtibs2000 thank you for using our product. Can you please share with us the repo of your project or a link to the webapp? We didn't see this before. As it is without having the files I'm thinking the initialisation of the Bootstrap Table app/dashboard/tables/bootstraptable/bootstraptable.component.ts line 16 is done before the elements from the labels are rendered. Maybe you should try to call that after all the elements are rendered, like on the ngAfterViewInit(): https://angular.io/docs/ts/latest/guide/lifecycle-hooks.html ?

Best, Alex

[mrtibs2000]

@alexandru-paduraru thanks, but I have my remote call after the init:

ngOnInit(){ $.getScript('../../../assets/libs/js/bootstrap-table.js'); initBootstrapTable(); // Init Tooltips $('[rel="tooltip"]').tooltip(); this._labelsService.getAll('170101', '171231') .subscribe( data => { this.labels = data; console.log(this.labels); }, error => { console.log(error); }, () => { } ); }

If you need access to my actual code, I will add you to the collaborators list in github.

[chelaruc]

@mrtibs2000 You can bind data to your bootstrap table component like this:

bootstraptable.component.ts

import { Component, OnInit, ElementRef, Renderer } from '@angular/core';
import initBootstrapTable = require('../../../../assets/js/init/initBootstrapTable.js');

declare var $:any;

@Component({
    moduleId: module.id,
    selector: 'bootstrap-table-cmp',
    templateUrl: 'bootstraptable.component.html'
})

export class BootstrapTableComponent implements OnInit{
    constructor(private _elRef: ElementRef, private _renderer: Renderer) {}

    ngOnInit(){
         $.getScript('../../../assets/js/plugins/bootstrap-table.js');

         $('[rel="tooltip"]').tooltip();

         $('#bootstrap-table').bootstrapTable({
             // console.log('aici');
             toolbar: ".toolbar",
             clickToSelect: false,
             showRefresh: true,
             search: true,
             showToggle: true,
             showColumns: true,
             pagination: true,
             searchAlign: 'left',
             pageSize: 8,
             pageList: [8,10,25,50,100],
             formatShowingRows: function(pageFrom, pageTo, totalRows){
                 //do nothing here, we don't want to show the text "showing x of y from..."
             },
             formatRecordsPerPage: function(pageNumber){
                 return pageNumber + " rows visible";
             },
             icons: {
                 refresh: 'fa fa-refresh',
                 toggle: 'fa fa-th-list',
                 columns: 'fa fa-columns',
                 detailOpen: 'fa fa-plus-circle',
                 detailClose: 'fa fa-minus-circle'
             },
            columns: [
               {title: "Status", field: "status", class:"text-center"},
               {title: "Postage Amount", field: "postage_amount", class:"text-center"},
               {title: "Fees Amount", field: "fees_amount", class:"text-center"},
               {title: "Total Amount", field: "total_amount", class:"text-center"},
            ],
            data: [
               {status: "bla", postage_amount: 2,fees_amount: 4, total_amount:6},
               {status: "manifested", postage_amount: 1,fees_amount: 3, total_amount:4},
               {status: "manifested", postage_amount: 2,fees_amount: 0, total_amount:2},
               {status: "manifested", postage_amount: 3,fees_amount: 2, total_amount:5}
            ]
            });
        //   this._labelsService.getAll('170101', '171231')
        //     .subscribe( data => { this.labels = data; console.log(this.labels); },
        //      error => { console.log(error); }, () => { } );
    }

}

bootstraptable.component.html

<table id="bootstrap-table" class="table"></table>

Please let us know if this was working for you.

Keep in touch, Ciprian

[mrtibs2000]

Sweet! Thanks!

[coanpape]

I found a way to use the [columnDefs] property to display icons with a data driven table, using the default angular environment. However I have been working to translate my project to the Angular CLI and it fails to compile/transpile when this object is specified. Has anybody gotten data driven display of icons working with the Angular CLI yet?

[mrtibs2000]

One more question. If I wanted to implement a hyperlink click, how would that go? I tried something like this and it didn't work. ... columns: [ {title: "", formatter: (data) => { return '<i class="pe-7s-print" (click)="details()">'; } ], ... details() { console.log('here'); } ...