无法在ngx-datatable Angular中添加自定义按钮

时间:2020-08-23 08:21:45

标签: javascript angular typescript ngx-datatable

我对angular和ngx-datatable不熟悉,因此在对SO提出此问题之前。我已经经历了与我面临的问题相同的答案,这些问题与在angular的ngx-datatable中的每一行中添加自定义按钮

我的HTML模板如下:

Arc

我的.ts文件是这样的


<ngx-datatable [rows]="rows" [loadingIndicator]="loadingIndicator" class="bootstrap"
        [selected]="selected" (activate)="onActivate($event, NewEventContent)">        
      
        <ngx-datatable-column *ngFor="let column of columns; let i = index;" 
        name="{{column.name}}" prop="{{column.prop}}">        

        <ngx-datatable-column name="Actions" prop="skuCode"></ngx-datatable-column>          

        <ng-template let-value="value" let-row="row" let-rowIndex="rowIndex"
          *ngIf="column.name==='Actions'" ngx-datatable-cell-template>
          <button type="button" class="btn btn-outline-success">Success {{rowIndex}}</button>
        </ng-template>
        
        </ngx-datatable-column>     
      </ngx-datatable>

我不知道我在做什么错,我在类似问题的其他答案中也看到了类似的方法,但是没有一个对我有用。

请帮助。

1 个答案:

答案 0 :(得分:0)

我找到了解决此问题的另一种方法,并成功在每行中实现了自定义按钮。所以我想回答这个问题,以便对任何人有帮助。

更改后,我的HTML模板如下所示。

<ngx-datatable [rows]="rows" class="material" [loadingIndicator]="loadingIndicator" 
      [columnMode]="'force'"
      [selected]="selected" (activate)="onActivate($event, NewEventContent)"
        [headerHeight]="50" [footerHeight]="50" [rowHeight]="'auto'" [columns]="columns">

        <ngx-datatable-column *ngFor="let column of columns; 
        let i = index;" name="{{column.name}}"
          prop="{{column.prop}}">
        </ngx-datatable-column>

        <ngx-datatable-column name="Actions" sortable="false" prop="Id">
          <ng-template let-row="row" let-value="value" let-rowIndex="rowIndex"
           ngx-datatable-cell-template>
            <button class="btn btn-dark" (click)="onSelect(row)">
              Edit{{rowIndex + 1}}
            </button>
          </ng-template>
        </ngx-datatable-column>

      </ngx-datatable>

请注意 ng-template 部分和onSelect(row)函数。在我的情况下,上述解决方案效果很好。

原始答案 https://github.com/swimlane/ngx-datatable/issues/489#issuecomment-356765048

相关问题