Ngx-Datatable 访问列中的 rowIndex

Question

HERE'S A STACKBLITZ FOR THIS PROBLEM:

https://dynamic-ng-grid.stackblitz.io

我必须在使用 ngFor 的地方访问 rowIndex 或行数据，我尝试使用 rowIndex 并浏览了文档，但无法找出它是如何工作的。任何帮助都会非常感谢。让我知道是否需要任何进一步的信息。这是代码：

<ngx-datatable
    style="height: 450px; cursor: pointer;"
    class="material"
    [rows]="rows"
    [rowHeight]="70"
    [footerHeight]="50"
    columnMode="force"
    [scrollbarV]="true"
    [scrollbarH]="true">

    <!-- months col -->
    <ngx-datatable-column 
        *ngFor="let month of getMonths(rows, rowIndex)" // THIS IS THE PLACE WHERE I HAVE TO ACCESS THE ROWINDEX OR ROW BUT UNABLE TO ACCESS IT 
        [name]="month.name"
        [width]="465">

        <ng-template let-value="value" let-row="row" let-rowIndex="rowIndex" ngx-datatable-cell-template>

            <span *ngIf="!month.detail; then avgTemp; else ratingTemp;"></span>
            <!-- average score -->
            <ng-template #avgTemp>{{ month.value | json }} MV</ng-template>
            <!-- monthly rating -->
            <ng-template #ratingTemp>
            <span *ngIf="month.detail.rating.isNA === 'Y'; then isNaTemp; else notNaTemp"></span>
            <!-- N/A -->
            <ng-template #isNaTemp>N/A</ng-template>
            <!-- Non-N/A -->
            <ng-template #notNaTemp>
                <span *ngIf="month.detail.rating.hrRating !== null; then hrRatTemp; else otherRatTemp"></span>
                <!-- Hr Rating -->
                <ng-template #hrRatTemp>{{ month.detail.rating.hrRating }} HR</ng-template>

                <ng-template #otherRatTemp>
                    <span *ngIf="month.detail.rating.lmRating !== null; then lmRatTemp; else otherRatTemp"></span>
                    <!-- Lm Rating -->
                    <ng-template #lmRatTemp>{{ month.detail.rating.lmRating }} LM</ng-template>

                    <ng-template #otherRatTemp>
                        <span *ngIf="month.detail.rating.empRating !== null; then empRatTemp; else zeroTemp"></span>
                        <!-- Emp Rating -->
                        <!-- <ng-template #empRatTemp>{{ month.detail.rating.empRating }} Emp</ng-template> -->
                        <ng-template #empRatTemp>{{ row.months | json }} Emp</ng-template>
                        <ng-template #zeroTemp>
                        <span *ngIf="(rowIndex + 1) != rows.length">0</span>
                        </ng-template>
                    </ng-template>
                </ng-template>
            </ng-template> <!-- Non-N/A -->
            </ng-template> <!-- monthly rating -->

        </ng-template>
    </ngx-datatable-column>

</ngx-datatable>

Answer 1

基于你的 stackblitz：

app.component.ts

@ViewChild(DatatableComponent) table: DatatableComponent;

public getRowIndex(row: any): number {
    return this.table.bodyComponent.getRowIndex(row); // row being data object passed into the template
}

app.component.html

...
<ngx-datatable  ....  #table> 
   <ngx-datatable-column>
        {{ getRowIndex(row) }}
   </ngx-datatable-column>
...

希望对您有所帮助。

Answer 2

这是一个很好的问题，因为我找不到任何相关的解决方案来实现这一点，而是尝试以不同的方式解决它。

我认为您无法在您尝试访问它的地方访问它。这是一个 stackblitz，它肯定能解决你的问题。这不是最好的方法，但可以解决问题。

https://stackblitz.com/edit/angular-hpm8k9

Answer 3

在（在这里插入脏话）和这个愚蠢的组件打交道几个小时之后，结果发现在绑定到 ngx-datatable 根标记的方法上，例如 [rowClass]="getRowClass"，函数调用的上下文，即 "this"，是数据表本身，而不是组件。因此，如果您在 getRowClass 函数的主体中查找 this.rowIndex，您可能会找到 this.rowIndex。但这里有一个问题：你的 TypeScript 不会编译，除非你添加一个本地 rowIndex 属性到你的组件。

我当然希望这在我进行了所有搜索和试验之后对某人有所帮助。我正在使用 Morteza 发布的 above/below 方法，但是当我努力复制 his/her 结果时，我发现了这个运行时的上下文切换。剩下的唯一一件事就是弄清楚我是想继续使用这样一个愚蠢的组件，还是看看其他东西，比如 PrimeNG...或者好旧的 Datatables.js.

Ngx-Datatable 访问列中的 rowIndex

Ngx-Datatable Access rowIndex in columns

ngx-datatable

angular