Angular Ngx数据表获取行的CSS
我的目标是在单击行内的按钮时将类应用于行 我在列中定义了一些按钮,如下所示: contactlist.component.htmlAngular Ngx数据表获取行的CSS,angular,ngx-datatable,Angular,Ngx Datatable,我的目标是在单击行内的按钮时将类应用于行 我在列中定义了一些按钮,如下所示: contactlist.component.html <ngx-datatable #ngxtable [messages]="messages" [rows]="contacts" [rowHeight]="env.ngx.datatableRowHeight" [headerHeight]="env.ngx.datatableHeaderHeight" [columnMode]="env.ngx.column
<ngx-datatable #ngxtable [messages]="messages" [rows]="contacts"
[rowHeight]="env.ngx.datatableRowHeight" [headerHeight]="env.ngx.datatableHeaderHeight" [columnMode]="env.ngx.columnModeFlex" [ngClass]="env.ngx.datatableClass" class="datatableSmall">
<ngx-datatable-column name="name" [flexGrow]="4">
<ng-template let-column="column" ngx-datatable-header-template>
<span>Nombre</span>
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column *ngIf="!isSmallScreen" name="phone" [flexGrow]="2">
<ng-template let-column="column" ngx-datatable-header-template>
<span>Telf</span>
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column *ngIf="!isSmallScreen" name="cellPhone" [flexGrow]="2">
<ng-template let-column="column" ngx-datatable-header-template>
<span>Móvil</span>
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column *ngIf="!isSmallScreen" name="mail" [flexGrow]="4">
<ng-template let-column="column" ngx-datatable-header-template>
<span>Correo</span>
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column name="Acciones" sortable="false" [flexGrow]="3">
<ng-template let-row="row" let-rowIndex="rowIndex" let-value="value" ngx-datatable-cell-template>
<ion-button *ngIf="!editMode" fill="clear" size="small" (click)="edit(row, rowIndex)">
<ion-icon slot="icon-only" name="create" color="black"></ion-icon>
</ion-button>
<ion-button *ngIf="!editMode" fill="clear" size="small" (click)="remove(row.id)">
<ion-icon slot="icon-only" name="remove-circle-outline" color="black"></ion-icon>
</ion-button>
</ng-template>
</ngx-datatable-column>
</ngx-datatable>
但是我看不到任何对行样式的引用。好的,找到一个解决方案
不需要获取对datatable的任何引用。Ngx Datatable有一个选项[rowClass],允许函数在特定条件下应用样式
就我而言:
<ngx-datatable #ngxtable [messages]="messages" [rows]="contacts" [rowClass]="isEditingRow"
<ngx-datatable #ngxtable [messages]="messages" [rows]="contacts" [rowClass]="isEditingRow"
isEditingRow = (row) => {
return {
'selectedEditMode': (() => { return row.id === this.editingRowId })()
};
}