Ngx-datatable: SPAN elements in row cells are showing up empty - no data binding on rows

[pixelsailor]

I'm submitting a ... (check one with "x")

[x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here

Current behavior

The "table" itself will render the correct number of rows (visible by inspecting the rendered page). However, it appears that data isn't being properly bound to the body-cell.component. .datatable-body-cell-label appears with an empty SPAN element.

<div class="datatable-body-cell-label">
    <!--template bindings={ "ng-reflect-ng-if": null }-->
    <!--template bindings={ "ng-reflect-ng-if": "true" }-->
    <span></span>
    <!--template bindings={ "ng-reflect-ng-if": null }-->
</div>

Expected behavior

Row data should be bound to the element and render to the page

Reproduction of the problem

Follow the examples in Getting Started as well as using the fetch method described in the demo.

What is the motivation / use case for changing the behavior?

Please tell us about your environment:

Mac OS 10.10.5
VS Code
Webpack
Angular CLI 1.0.15
Node

• Table version: 6.0.2
  

• Angular version: 2.4.5
  

• Browser: all

• Language: TypeScript 2.0.10

[amcdnl]

Can you make a demo?

[pixelsailor]

Hmm, haven't been able to recreate the issue. Made a couple test builds using both Angular quickstart and CLI and in both cases the plugin is working fine. Something to do with my project environment then :/

[amcdnl]

Alrighty. I'm gonna close for now then.

[avikaza]

@pixelsailor, were you able to figure out what is wrong with your environment that caused the empty spans in row data cells?
I am having the same issue and wondering what I am doing wrong

I have observables for both rows and columns, using the async pipe

[avikaza]

Never mind, I figured it out
My columns names were in PascalCase and if I do lowercase for my row names in name value pairs there seems to be an issue matching columns to rows ... an error would have saved me 4hrs but, I am just learning this component so it is alright

Thank you for a fantastic data-grid though 👍

[AksenovAndrew]

Issue is present.

When I get data from controller in PascalCase see screenshot #1 below
Data display properly in code:

  <tr *ngFor="let company of page.Items">
      <td>{{company.Name }}</td>
      <td>{{company.ContactPerson}}</td>
      <td>{{company.OMSId}}</td>
      <td>{{company.Token}}</td>
  </tr>

but data doesn't display properly in grid, see screenshot #2, in top just html table, bottom grid

<ngx-datatable class="bootstrap ngx-datatable"
               #someTable
               [rows]="page.Items"
               [loadingIndicator]="loading"
               [columns]="columns"
               [externalPaging]="true"
               [externalSorting]="true"
               [columnMode]="ColumnMode.force"
               [count]="page.TotalElements"
               [limit]="page.Size"
               [offset]="page.PageNumber"
               (page)="onPage($event)"
               (sort)="onSort($event)"
               [headerHeight]="50"
               [summaryRow]="true"
               [summaryPosition]="'bottom'"
               [footerHeight]="50"
               rowHeight="auto"
               [reorderable]="reorderable">
  <ngx-datatable-column name="Name" width="100">
    <ng-template let-value="value" ngx-datatable-cell-template>
      {{ value }}
    </ng-template>
  </ngx-datatable-column>
</ngx-datatable>

screen 1

screen 2