Индекс строки недоступен в таблице 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


angular angular-cdk
person Vladimir Prudnikov    schedule 26.02.2019    source источник
comment
Разве row - 1 не ваш индекс?   -  person Korfoo    schedule 26.02.2019
comment
Нет, строка — это элемент из источника данных. Мне нужен индекс этого элемента в источнике данных.   -  person Vladimir Prudnikov    schedule 26.02.2019

Ответы (2)


arrow_upward
2
arrow_downward

Вы должны использовать 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`.
 */

Подробнее см. здесь.

person Korfoo    schedule 26.02.2019

arrow_upward
1
arrow_downward

Это тот же вопрос, что и этот вопрос SO

вы должны использовать dataIndex следующим образом:

<tr cdk-row *cdkRowDef="let row; let i = dataIndex;; columns: ['width']"></tr>
person GaryB    schedule 26.02.2019
comment
Однако большое спасибо, я выбрал ответ @Korfoo, потому что он более информативен. - person Vladimir Prudnikov; 26.02.2019