问题
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();
}
}
}
}
回答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>
来源:https://stackoverflow.com/questions/49934014/ngx-datatable-how-to-display-value-of-a-property-on-a-object-in-a-row