ngx-datatable:如何在一行中的对象上显示 属性 的值
ngx-datatable: How to display value of a property on a object in a row
我在 ngx-datatable 中遇到一些基本问题。
在 angular-cli 应用程序中,我将一个包含 3 个元素的数组绑定到 table 并显示 3(空)行。当我单击一行时,我正确地得到了我绑定该行的对象。我用这个 http://swimlane.github.io/ngx-datatable/#single-selection 作为起点
这是 UI 中的样子。 属性 StockName 的值应该打印在每一行中。但事实并非如此,但是 select 行的值正确显示在 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>
这是向 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();
}
}
}
}
我成功了:)
我需要将其更改为:
colums: any[] = [ { prop: 'StockName' } ];
至:
{ name: 'StockName', prop: 'StockName' }
并删除:
<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 中遇到一些基本问题。
在 angular-cli 应用程序中,我将一个包含 3 个元素的数组绑定到 table 并显示 3(空)行。当我单击一行时,我正确地得到了我绑定该行的对象。我用这个 http://swimlane.github.io/ngx-datatable/#single-selection 作为起点
这是 UI 中的样子。 属性 StockName 的值应该打印在每一行中。但事实并非如此,但是 select 行的值正确显示在 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>
这是向 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();
}
}
}
}
我成功了:)
我需要将其更改为:
colums: any[] = [ { prop: 'StockName' } ];
至:
{ name: 'StockName', prop: 'StockName' }
并删除:
<ngx-datatable-column name="StockName">
<ng-template let-value="value" ngx-datatable-cell-template>
StockName is: '{{value.StockName}}'
</ng-template>
</ngx-datatable-column>