问题

以下是代码部分的翻译：

在渲染表格时，要获得行的索引值很明显，根据Angular Material指南，你可以这样做：

<tr mat-row *matRowDef="let row; columns: displayedColumns; let i = index" (click)="debug(i)"></tr>

但是对于列的索引呢？这似乎有些复杂，因为我们没有使用传统的for循环来生成列，而是直接在*matRowDef中分配列，就像上面所示的方式。

我们定义列的方式如下：

<ng-container matColumnDef="returnToService">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> Returned To Service </th>
    <td mat-cell *matCellDef="let workOrder"> {{formatDate(workOrder.returnToService)}} </td>
</ng-container>

<ng-container matColumnDef="requestDate">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> Work Order Reported Date </th>
    <td mat-cell *matCellDef="let workOrder"> {{formatDate(workOrder.requestDate)}} </td>
</ng-container>

我在*matHeaderRowDef中看不到获取列索引的方法：

<tr mat-header-row *matHeaderRowDef="displayedColumns; let i = ???" (click)="debug(??)"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns; let i = index" (click)="debug(i)"></tr>

请注意，我无法提供确切的列索引获取方法，因为在提供的代码片段中，没有显示如何获取列的索引。这可能需要查阅Angular Material文档或进一步的代码调查来解决。

<tr mat-row *matRowDef="let row; columns: displayedColumns;let i = index" (click)="debug(i)"></tr>

<ng-container matColumnDef="returnToService"> 
            <th mat-header-cell *matHeaderCellDef mat-sort-header> Returned To Service </th>
            <td mat-cell *matCellDef="let workOrder"> {{formatDate(workOrder.returnToService)}} </td>
 </ng-container>

 <ng-container matColumnDef="requestDate">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> Work Order Reported Date </th>
            <td mat-cell *matCellDef="let workOrder"> {{formatDate(workOrder.requestDate)}}  </td>
  </ng-container>

 <tr mat-header-row *matHeaderRowDef="displayedColumns; let i = ???" (click)="debug(??)"></tr>
 <tr mat-row *matRowDef="let row; columns: displayedColumns;let i = index" (click)="debug(i)"></tr>

答案1

得分: 1

看起来只有 `matCellDef` 和 `matRowDef` 导出了位置上下文，而且即使是在这两者中，也只有行上下文，没有列上下文。它们在 `CdkTable` 概述中对此进行了简要描述，而 `MatTable` 就是从中派生的：https://material.angular.io/cdk/table/overview

因此，你将需要从名称中自行获取索引。很可能列的数量不会很多，所以对数组进行简单搜索应该是可以的。

TS
```typescript
  getColumnIndex(name: string): number {
    return this.displayedColumns.indexOf(name);
  }

HTML - 举例列

  <ng-container matColumnDef="returnToService">
    <th
      mat-header-cell
      *matHeaderCellDef
      mat-sort-header
      (click)="debug(getColumnIndex('returnToService'))"
    >
      Returned To Service
    </th>
    <td mat-cell *matCellDef="let workOrder">
      {{formatDate(workOrder.returnToService)}}
    </td>
  </ng-container>

实时示例：https://stackblitz.com/edit/angular-m9atjw?file=src/app/table-basic-example.html

<details>
<summary>英文:</summary>

Looks like only `matCellDef` and `matRowDef` export any position context, and even then it is only row context, not column. They describe it briefly on the `CdkTable` overview, which is what the `MatTable` is derived from: https://material.angular.io/cdk/table/overview

So you&#39;ll have to just get the index yourself from the name. It&#39;s unlikely there will be a significant number of columns, so a brute force search of the array is probably fine.

TS
```typescript
  getColumnIndex(name: string): number {
    return this.displayedColumns.indexOf(name);
  }

HTML - example column

  <ng-container matColumnDef="returnToService">
    <th
      mat-header-cell
      *matHeaderCellDef
      mat-sort-header
      (click)="debug(getColumnIndex('returnToService'))"
    >
      Returned To Service
    </th>
    <td mat-cell *matCellDef="let workOrder">
      {{formatDate(workOrder.returnToService)}}
    </td>
  </ng-container>

Live example: https://stackblitz.com/edit/angular-m9atjw?file=src/app/table-basic-example.html