行索引在Angular CDK表中不可用

时间:2019-02-26 13:56:56

标签: 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

2 个答案:

答案 0 :(得分:1)

您应该使用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`.
 */

查看here了解更多信息

答案 1 :(得分:1)

this SO question

相同的问题

您应该像这样使用dataIndex:

=TEXTJOIN(",  ";TRUE;IF(A2:A12=E2;C2:C12;""))