как определить индекс в таблице угловых материалов

как определить индексную переменную, когда таблица угловых материалов используется, поскольку ngFor не используется в этой таблице.

Я искал его в документации, но индекс не упоминается нигде в нем.

  <mat-table #table [dataSource]="dataSource">

    <!--- Note that these columns can be defined in any order.
          The actual rendered columns are set as a property on the row definition" -->

    <!-- Position Column -->
    <ng-container matColumnDef="position">
      <mat-header-cell *matHeaderCellDef> No. </mat-header-cell>
      <mat-cell *matCellDef="let element"> {{element.position}} </mat-cell>
    </ng-container>

    <!-- Name Column -->
    <ng-container matColumnDef="name">
      <mat-header-cell *matHeaderCellDef> Name </mat-header-cell>
      <mat-cell *matCellDef="let element"> {{element.name}} </mat-cell>
    </ng-container>

    <!-- Weight Column -->
    <ng-container matColumnDef="weight">
      <mat-header-cell *matHeaderCellDef> Weight </mat-header-cell>
      <mat-cell *matCellDef="let element"> {{element.weight}} </mat-cell>
    </ng-container>

    <!-- Symbol Column -->
    <ng-container matColumnDef="symbol">
      <mat-header-cell *matHeaderCellDef> Symbol </mat-header-cell>
      <mat-cell *matCellDef="let element"> {{element.symbol}} </mat-cell>
    </ng-container>

    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
    <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
  </mat-table>
</div>

Ответ 1

Можете ли вы добавить index чтобы let element; let я = index;" let element; let я = index;" как бы вы сделали с *ngFor?

<mat-row *matRowDef="let row; columns: displayedColumns; let i = index"></mat-row>

Или вот так:

<ng-container matColumnDef="index">
  <mat-header-cell *matHeaderCellDef> Index </mat-header-cell>
  <mat-cell *matCellDef="let element; let i = index;">{{i}}</mat-cell>
</ng-container>

Ответ 2

Для тех, кто установил для свойства multiTemplateDataRows mat-table значение true, вы не можете использовать index. Вместо этого вы должны использовать либо dataIndex либо renderIndex.

<mat-cell *matCellDef="let row; let i = dataIndex;">{{i}}</mat-cell>

См. Https://github.com/angular/material2/issues/12793.

Ответ 3

Для тех, кто сталкивается с проблемой сохранения правильного индекса при использовании нумерации страниц, в таблице которого более 1 страницы. Это может быть особенно важно, когда у вас есть редактируемый элемент, поэтому вы используете routerLink для добавления/редактирования/удаления выбранных элементов.

<ng-container matColumnDef="title">
 <mat-header-cell *matHeaderCellDef mat-sort-header>Title</mat-header-cell>
 <mat-cell *matCellDef="let book; let i = index;" fxLayoutAlign.lt-md="center center">
  <button mat-button [routerLink]="[i + (paginator.pageIndex * paginator.pageSize)]" routerLinkActive="active"</button>
 </mat-cell>
</ng-container>

Так же как

<mat-paginator #paginator [pageSize]="5" [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>

По сути, i + (paginator.pageIndex * paginator.pageSize) является решением, но оно считается от 0. Если вы хотите индексировать от 1, просто сделайте это (i + 1) + (paginator.pageIndex * paginator.pageSize). Стоит отметить, что вам действительно нужны #paginator и [pageSize] = "VALUE".

Ответ 4

Из Angular 5 вы можете использовать псевдоним index для локальной переменной i используя index as i

<ng-container matColumnDef="rowIndex">
  <mat-header-cell *matHeaderCellDef> Index </mat-header-cell>
  <mat-cell *matCellDef="let element;index as i;"> {{ i }} </mat-cell>
</ng-container>

Ответ 5

Если кто-то использует <mat-paginator ../>, то индекс можно интерпретировать как ниже

<mat-cell *matCellDef="let element; index as i"> {{paginator.pageSize * paginator.pageIndex + i + 1}}</mat-cell>