这是这个问题的STACKBLITZ:
https://stackblitz.com/edit/angular-7dgk8e
我必须访问我使用过ngFor的rowIndex或row数据,我尝试使用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>
这是一个很好的问题,因为我无法找到任何相关的解决方案来实现这一点,而是尝试以不同的方式解决它。
我想你将无法访问你试图访问它的rowIndex。这是一个stackblitz,它肯定能解决你的问题。这不是最好的方法,但它会解决问题。
基于你的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>
...
我希望这可以帮助你。
之后(在这里插入咒骂词)和这个愚蠢的组件持续了好几个小时,事实证明,在绑定到ngx-datatable根标签的方法上,例如[rowClass] =“getRowClass”,函数的上下文call,即“this”,是数据表本身,而不是组件。因此,如果在getRowClass函数的主体中查找this.rowIndex,则可以找到this.rowIndex。但这就是问题:除非您向组件添加本地rowIndex属性,否则您的TypeScript将无法编译。
我确定希望在我完成所有搜索和实验后,这有助于某人。我正在使用上面/下面发布的Morteza方法,但是当我努力复制他/她的结果时,我在运行时发现了这个上下文切换。唯一剩下的就是弄清楚我是否想要继续使用这样一个愚蠢的组件,或者看看像PrimeNG这样的其他东西......或者说是好旧的Datatables.js。