ngx-datatable: How to display value of a property on a object in a row

Question

I am struggling with something basic in ngx-datatable.

In an angular-cli application I am binding an Array with 3 elements to the table and get displayed 3 (empty) rows. When I click a row I correctly get the object i have bound the row. I have used this http://swimlane.github.io/ngx-datatable/#single-selection as a starting point

This is how it looks in the UI. The value of property StockName should be printed in each row. But it doesn't, but the value of a select row is correctly being shown below the table.

 <ngx-datatable
        class="material"
        [rows]="rows"
        [columnMode]="'force'"
        [columns]="columns"
        [headerHeight]="0"
        [footerHeight]="0"
        [rowHeight]="'auto'"
        [limit]="5"
        [selected]="selected"
        [selectionType]="'single'"           
        (select)='onSelect($event)'>
        <ngx-datatable-column name="StockName">                  

                <ng-template let-value="value" ngx-datatable-cell-template>          
                  StockName is: '{{value.StockName}}'          

                </ng-template>

              </ngx-datatable-column>
      </ngx-datatable>

    <p>############</p>
    <div class='selected-column'>
            <h4>Selections</h4>        
            <ul>        
              <li *ngFor='let sel of selected'>        
                Selected StockName is: {{sel.StockName}}       
              </li>        
              <li *ngIf="!selected">No Selections</li>        
            </ul>        
          </div>

This is the code that add rows to table

rows: Array<TradingConfiguration> = Array<TradingConfiguration>();
selected: Array<TradingConfiguration> = Array<TradingConfiguration>();

colums: any[] = [ { prop: 'StockName' } ];

// Add row to table
addRows(tradingConfigurations: Array<TradingConfiguration>) {

if (tradingConfigurations != null && tradingConfigurations.length > 0) {

  for (var i = 0; i < tradingConfigurations.length; i++) {
    if (tradingConfigurations[i].IsActive == this.showActive){
      // Add a new row to the table
      this.rows.unshift(tradingConfigurations[i]);
      this.rows = this.rows.slice();
     }        
   }
 }
}

Answer 1

I got it to work :)

I needed to change this from:

colums: any[] = [ { prop: 'StockName' } ];

to:

 { name: 'StockName', prop: 'StockName' }

and remove:

<ngx-datatable-column name="StockName">                  

            <ng-template let-value="value" ngx-datatable-cell-template>          
              StockName is: '{{value.StockName}}'          

            </ng-template>

          </ngx-datatable-column>