angular - Ngx-Datatable 访问列中的行索引
问题描述
这是针对此问题的堆栈闪电:
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>
解决方案
基于您的堆栈闪电战:
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>
...
我希望这可以帮助你。
推荐阅读
- python - 在 Python asyncio/aiohttp 中使同步代码异步
- python - 如何解决 TypeError:字符串索引必须是整数,同时在 pandas 中应用 lambda 函数?
- vcpkg - 安装了Leveldb,但缺少库
- web - 与网站的关联以查看库存(亚马逊、Cdiscount、LDLC、...)
- c# - 如何访问 startup.cs 文件中的 TempData?
- python - 尝试查找列表的总和时出错
- python - 为什么beautifulSoup 找不到text 参数传入的文本?
- format - CanaKit Raspberry Pi 4 SD 卡 - 不要格式化 SD 卡
- javascript - 错误:访问用户数据时未设置访问、刷新令牌或 API 密钥
- scala - scala 的 VectorMap 是如何工作的,它与 ListMap 有什么不同?