각도 자재 테이블에서 행 인덱스 가져오기 v5

각도 자재 테이블에서 행 인덱스 가져오기 v5

각재 v5.2를 사용하여 구현된 html의 테이블 행 인덱스를 구하려고 합니다.지수를 구할 수 있는 방법이 있습니까?

참조용 코드:

<div class="example-container mat-elevation-z8">
  <div class="example-header">
    <mat-form-field>
      <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
    </mat-form-field>
  </div>

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

    <!-- 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">
     <button (click)="doSomething()"> Do something</button>
    </ng-container>

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

doSomething 메서드는 인덱스가 필요한 것입니다.

어떤 도움이라도 주시면 대단히 감사하겠습니다.

indexOf를 사용하는 것은 엄청난 리소스 낭비입니다.올바른 방법은 다음과 같이 인덱스 값으로 변수를 초기화하는 것입니다.

<ng-container matColumnDef="position">
  <th mat-header-cell *matHeaderCellDef mat-sort-header> Num. </th>
  <td mat-cell *matCellDef="let element; let i = index">{{i + 1}}</td>
</ng-container>

https://material.angular.io/components/table/examples

업데이트:

페이지 표시를 사용하는 경우 인덱스는 다음과 같은 방식으로 계산할 수 있습니다.

<ng-container matColumnDef="position">
  <th mat-header-cell *matHeaderCellDef mat-sort-header> Num. </th>
  <td mat-cell *matCellDef="let i = index">
  {{this.paginator.pageIndex == 0 ? i + 1 : 1 + i + this.paginator.pageIndex * this.paginator.pageSize}}
  </td>
</ng-container>

Angular6+를 사용하는 사람은 누구나 사용해야 합니다.let i = dataIndex대신에let i = index이번 Github 호에서 설명한 바와 같이.

HTML 스니펫은 다음과 같습니다.

<ng-container matColumnDef="position">
  <th mat-header-cell *matHeaderCellDef mat-sort-header> Num. </th>
  <td mat-cell *matCellDef="let element; let i = dataIndex">{{i + 1}}</td>
</ng-container>

사용할 수 있습니다.filteredData당신의 소유물dataSource, 다음과 같이:

<ng-container matColumnDef="weight">
  <th mat-header-cell *matHeaderCellDef> Header</th>
  <td mat-cell *matCellDef="let element"> {{dataSource.filteredData.indexOf(element)}} </td>
</ng-container>

---

데모

@user3891850 솔루션 사용(let i = index;), 페이지 구성 시 인덱스는 글로벌 개체가 아닌 이 페이지의 인덱스가 되므로 페이지 구성 시 주의해야 합니다.예를 들면

이 문제가 발생하여 사용 중인 경우paginator여기서 얻을 수 있는 지수:

  <td mat-cell *matCellDef="let element; let i = index">{{i}}</td>

테이블에 표시되는 현재 인덱스가 됩니다.예를 들어, 페이지가 2페이지이고 페이지 크기가 5인 경우, 테이블의 첫 번째 인덱스는 5(또는 6번째 항목)가 아니라 0이 됩니다.따라서 실제 인덱스를 얻기 위해 할 수 있는 작업은 다음과 같습니다.

index =
      this.paginator.pageIndex > 0
        ? index + this.paginator.pageIndex * this.paginator.pageSize
        : index;

페이지 표시기가 1페이지에 있으면 색인이 변경되지 않습니다.그렇지 않으면 pageIndex에 pageSize를 곱하여 인덱스에 추가합니다.

매트 테이블에서 위치 번호 증가...

<ng-container matColumnDef="index">
  <th mat-header-cell *matHeaderCellDef> Sr.No </th>
  <td mat-cell *matCellDef="let i=index"> {{i+1}} </td>
</ng-container>

나는 이 게시물이 오래되었다는 것을 알지만 위의 해결책은 나에게 효과가 없었습니다. 대신에 만약let i = index;해라let i = dataIndex최신 버전의 매트 테이블에 대해서는 이 솔루션을 확인합니다.확장 가능한 테이블용인지는 모르겠지만,

각도재 표를 사용할 때 2가지 케이스를 발견했습니다.

• 사용.*matCellDef="let row = index"테이블에 한 행 템플릿이 있는 경우
• 사용.*matCellDef="let row = dataIndex"테이블에 여러 행 템플릿이 있는 경우

많이 검색했지만, 제 경우 "indexOf" 시나리오가 제대로 작동하지 않아 이 답변을 찾았고, 제가 필요로 하는 것을 정확하게 수행합니다.

let i = index;
i + (paginator.pageIndex * paginator.pageSize);

*matRowDef에 'leti = index' 포함

  rindex:any;
  Cindex:any;

  show(){
    console.log("Column",this.Cindex,""+"Cell",this.rindex)

  }
  logIndex(j:any):void{
 this.Cindex=j

  }
  logIndex1(i:any):void{
    this.rindex=i

  }

  <ng-container *ngFor="let col of displayedColumns; index as i;" matColumnDef={{col}}>
                      <th mat-header-cell *matHeaderCellDef="">{{displayedColumnsNames[i]}}</th>
                      <td mat-cell *matCellDef="let element  ; "(click)="logIndex1(i) "> {{element[col]}} </td>
                  </ng-container>

                  <tr mat-header-row *matHeaderRowDef="displayedColumns;sticky :true   " ></tr>
                  <tr  mat-row *matRowDef="let row; columns: displayedColumns;  let j=index; "(click)="[logIndex(j),show()] " ></tr>

언급URL : https://stackoverflow.com/questions/50292349/get-index-of-row-in-angular-material-table-v5