각도 자재 표에서 인덱스를 정의하는 방법

각도 자재 표에서 인덱스를 정의하는 방법

이 표에서 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>

테이블 자체의 인덱스 값을 바인딩할 수 있도록 이 테이블에서 사용한 배열에 대한 인덱스 변수를 정의하는 방법은 무엇입니까?

추가해주실수 있나요?index로.let element; let i = 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>

작업 예: https://stackblitz.com/edit/angular-acdxje?file=app/table-basic-example.html

다음을 설정한 모든 사람에게multiTemplateDataRowsmat-table 속성을 true로 지정하면 사용할 수 없습니다.index. 대신에 둘 중 하나를 사용해야 합니다.dataIndex아니면renderIndex.

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

https://github.com/angular/material2/issues/12793 참조

페이지를 사용할 때 올바른 색인을 유지하는 데 문제가 있는 사람들을 위해 어떤 표에 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)로 만들기만 하면 됩니다.참고할 점은 #decominator와 [pageSize]=가 꼭 필요하다는 것입니다."값(VALUE)".

를 사용하는 경우<mat-paginator ../>, 그러면 지수는 아래와 같이 해석될 수 있습니다.

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

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>

매트 테이블에서 페이지를 사용하는 경우,

<ng-container matColumnDef="index">
   <mat-header-cell *matHeaderCellDef> Index </mat-header-cell>
   <mat-cell *matCellDef="let element; index as i">
        {{tableOnePaginator.pageSize * tableOnePaginator.pageIndex + i + 1}}</mat-cell>
</ng-container>

여기서는 이 테이블 OnePaginator를 사용하기 전에 구성 요소에 정의해야 합니다.그리고 당신의 dataSource에 다음과 같이 설정했는지 확인합니다.

this.dataSource.paginator = this.tableOnePaginator;

페이지 변경 시마다 색인을 배치하려면 아래 코드로 이동합니다.HTML 파일:-

<ng-container matColumnDef="Position">
   <th mat-header-cell *matHeaderCellDef> # </th>
   <td mat-cell *matCellDef="let element; let i= index"> {{i + 1 +
     (thirdPaginator.pageIndex*thirdPaginator.pageSize) }}</td>
</ng-container>

*ngFor와 같이 let 요소에 인덱스를 추가할 수 있습니까? i = index;"를 추가할 수 있습니까?

<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 + 1}}</mat-cell>
</ng-container>

페이지를 사용하거나 다음을 시도해 보십시오.

<ng-container matColumnDef="position">
  <th mat-header-cell *matHeaderCellDef> Position </th>
  <td mat-cell *matCellDef="let element; let i = index"> {{(i+1) + (paginator.pageIndex*paginator.pageSize)}} </td>
</ng-container>

Angular 버전 8에서 완벽하게 작동합니다. #decinator와 [pageSize]="를 사용해야 합니다.가치"

<td mat-cell *matCellDef="let row; let indx = dataIndex">

multiTemplateDataRows 지시어를 사용하여 각 데이터 개체에 대해 여러 행을 지원하는 경우 인덱스 값이 데이터로 대체되는 것을 제외하면 *matRowDef의 컨텍스트는 동일합니다.색인 및 렌더링색인.

<ng-container matColumnDef="Index">
   <th mat-header-cell *matHeaderCellDef> # </th>
   <td mat-cell *matCellDef="let element; index as i;">
      {{_paginator.pageSize * _paginator.pageIndex + i + 1}}    
   </td>
</ng-container>

헤딩

Angular 14에서 내 경우에 작용한 고유한 선언은 다음과 같습니다.

<td mat-cell *matCellDef="let row; let i = dataIndex">

앱의 index as i또한 효과는 있지만 항상 그렇지는 않습니다.다를 .let i = index는 Angular Angular된로다져의다sdnfs된nr로gr의

언급URL : https://stackoverflow.com/questions/49648270/how-to-define-index-in-angular-material-table