“如何解决Angular中的NGX数据表复选框问题?”

时间:2019-05-14 04:48:17

标签: javascript angular typescript ngx-datatable

我只是为所有索引创建了通用的NGX数据表,但是每当我使用表中的复选框时,它总是出现在索引的最后一列中。每当我单独应用它时,它就会出现在第一列中,但我不想像在每个索引中一样单独使用它。

------------------------每个表--------------------- ------

 <div class="row">
          <ngx-datatable-footer>
            <ng-template *ngIf="filerData.total>0" ngx-datatable-footer-template let-rowCount="filerData.total"
              let-pageSize="pageSize" let-selectedCount="selectedCount" let-curPage="curPage"
              let-offset="offset">
              <div class="col-md-1 datatable-footer_pagination">
                <select class="form-control" (change)="onPager($event.target.value,curPage)">
                  <option *ngFor="let option of pageLimitOptions" [value]="option.value"
                    [selected]="option.value == 15">
                    {{option.name}}
                  </option>
                </select>
              </div>
              <datatable-pager class="mb-2" [pagerLeftArrowIcon]="'datatable-icon-left'"
                [pagerRightArrowIcon]="'datatable-icon-right'" [pagerPreviousIcon]="'datatable-icon-prev'"
                [pagerNextIcon]="'datatable-icon-skip'" [page]="curPage" [size]="pageSize"
                [count]="filerData.total" (change)="onPager($event,curPage)">
              </datatable-pager>
            </ng-template>
            <ng-template ngx-datatable-footer-template let-rowCount="filerData.total" let-pageSize="pageSize"
              let-selectedCount="selectedCount" let-curPage="curPage" let-offset="offset">
              <div class="col-md-4 datatable-footer_pagination"> No Data To Display
              </div>
            </ng-template>
          </ngx-datatable-footer>
        </div>
      </ngx-datatable>

------------------------公用表--------------------- ------

<app-ws-table [rows]="rows" (onSort)="onSort($event)" [isCheckBox]="true" [columns]="columns"
                [loading]="tableLoading" [rowCount]="filerData.total" [rowOffset]="filerData.current_page"
                [rowLimit]="filerData.per_page" (onPager)='onPager($event)' (rowDelete)="onDeletion($event)"
                (rowEdit)="onEdit($event)" [isClass]="true" [isLocal]="false" (selectedItem)="selectedClasses($event)"
                (onDownload)="onFiles($event)">
              </app-ws-table> 

1 个答案:

答案 0 :(得分:0)

这对我有用。 在 html 中

<ngx-datatable [rows]="rows" 
[columns] = "[
         {name:'select', cellTemplate: checkBox},
         {name:'column one', prop:'one'},
         {name:'column two', prop:'two'},
         {name:'column three', prop : 'three'}
         {name:'column four', prop: 'four'}]">
   <ng-template #checkBox let-row="row" let-value="value">
          <input type="checkbox">                         
   </ng-template>
</ngx-datatable>

这会起作用。将您想要的数据分配给行。在 TS,
this.rows = data