无法在 ngx-datatable 中添加自定义按钮 Angular
Unable to add custom buttons in ngx-datatable Angular
我是 angular 和 ngx-datatable 的新手,在问这个问题之前。我已经完成了我面临的与 在 angular.
的 ngx-datatable 中的每一行中添加自定义按钮相关的相同问题的答案
我的 HTML 模板如下所示:
<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>
我的 .ts 文件看起来像这样
columns = [{name: 'Actions', prop: 'Id' }...];
我不知道我做错了什么,我在类似问题的其他答案中看到了类似的方法,但 none 对我有用。
请帮忙。
我找到了解决此问题的替代方法,并成功地在每一行中实现了自定义按钮。所以我想回答这个问题,这样它可能对任何人都有帮助。
更改后,我的 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
我是 angular 和 ngx-datatable 的新手,在问这个问题之前。我已经完成了我面临的与 在 angular.
的 ngx-datatable 中的每一行中添加自定义按钮相关的相同问题的答案我的 HTML 模板如下所示:
<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>
我的 .ts 文件看起来像这样
columns = [{name: 'Actions', prop: 'Id' }...];
我不知道我做错了什么,我在类似问题的其他答案中看到了类似的方法,但 none 对我有用。
请帮忙。
我找到了解决此问题的替代方法,并成功地在每一行中实现了自定义按钮。所以我想回答这个问题,这样它可能对任何人都有帮助。
更改后,我的 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