angular - 行索引在 Angular CDK 表中不可用
问题描述
我有一个像这样的简单表
<table cdk-table [dataSource]="doors" [multiTemplateDataRows]="true" class="table table-hover">
<ng-container cdkColumnDef="width">
<th cdk-header-cell *cdkHeaderCellDef>Width</th>
<td cdk-cell *cdkCellDef="let row; let idx = index;">
Index: [{{idx}}]
<span *ngIf="idx === undefined">undefined</span>
<span *ngIf="idx === null">null</span>
</td>
</ng-container>
<tr cdk-header-row *cdkHeaderRowDef="['width']"></tr>
<tr cdk-row *cdkRowDef="let row; let i = index; columns: ['width']"></tr>
</table>
我需要访问行索引,但它是未定义的。我究竟做错了什么?
Stackblitz:https ://stackblitz.com/edit/angular-3cknv1
解决方案
你应该使用let idx = dataIndex;
由于您使用的是[multiTemplateDataRows]=true
.
从来源:
/**
* Context provided to the row cells when `multiTemplateDataRows` is true. This context is the same
* as CdkCellOutletRowContext except that the single `index` value is replaced by `dataIndex` and
* `renderIndex`.
*/
在这里查看更多信息
推荐阅读
- php - 如何编译一个不依赖不同版本API的Zend扩展?
- mysql - mysql:创建表后添加外键
- javascript - 将连续日期添加到 li ul
- google-bigquery - 为什么某些 Apache 许可的存储库不在 GitHub 开放数据集中?
- c# - C# 在 Datagridview 中显示两个日期之间的数据。来自 DatetimePicker 或文本框的日期
- elasticsearch - 如何基于另一个领域提升 Elasticsearch 结果?
- python-3.x - 当你有“动态”值时如何解析 json
- python - 使用 python-pptx 从现有图表中读取图表数据
- c# - 关于 Enumerable/List 的评估
- php - xml文件中节点的修改和替换