时间戳

首页 > 解决方案 > ngx-datatable 获取行的 CSS

angular - ngx-datatable 获取行的 CSS

问题描述

我的目标是当我单击行内的按钮时将一个类应用于一行。

我在列中定义了一些按钮，如下所示：

联系人列表.component.html

<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>

使用 .ts 中定义的函数，我可以获得行值，但永远无法访问应用于该行的类。

我通过以下方式获得了对 Datatable 对象的引用：

  @ViewChild('ngxtable', {static: false})
  private ngxTable: DatatableComponent;

但我看不到任何对行样式的引用。

标签： angularngx-datatable

解决方案

好的，找到解决方案。

无需获取对数据表的任何引用。Ngx Datatable 有一个选项 [rowClass] 允许函数在某些条件下应用样式。

就我而言：

<ngx-datatable #ngxtable [messages]="messages" [rows]="contacts"  [rowClass]="isEditingRow"

在 .ts

  isEditingRow = (row) => {
    return {
      'selectedEditMode': (() => { return row.id === this.editingRowId })()
    };
  }

推荐阅读