ngx-datatable:如何在一行中的对象上显示属性的值 [英] ngx-datatable: How to display value of a property on a object in a row

问题描述

我正在努力处理ngx-datatable中的一些基本问题.

I am struggling with something basic in ngx-datatable.

在angular-cli应用程序中，我将具有3个元素的Array绑定到表，并显示3个(空)行.当我单击一行时，我正确地得到了我已绑定该行的对象.我已经使用过 http://swimlane.github.io/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

这是它在UI中的外观.属性StockName的值应在每一行中打印.但这没有，但是选择行的值正确显示在表格下方.

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();
     }        
   }
 }
}

推荐答案

我可以使用它了:)

我需要将其更改为:

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:如何在一行中的对象上显示属性的值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！