angular材料テーブルが使用されている場合、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>
このテーブルで使用した配列のインデックス変数をどこでどのように定義すれば、テーブル自体のインデックス値をバインドできます。
let element; let i = index;"
と同様に、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>
mat-table のmultiTemplateDataRows
プロパティをtrueに設定している場合は、index
を使用できません。代わりに、dataIndex
またはrenderIndex
のいずれかを使用します。
<mat-cell *matCellDef="let row; let i = dataIndex;">{{i}}</mat-cell>
表に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)は解決策ですが、からカウントされます。 1からインデックスを作成する場合は、単純に(i + 1)+(paginator.pageIndex * paginator.pageSize)にします。注意する価値があるのは、本当に必要なのは#paginatorと[pageSize] = "VALUE"です。
Angular 5から、index as i
を使用して、index
をローカル変数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>