如何獲取物料表Angular中的行索引

Question

如何獲取物料表中的行索引 angular

 <td mat-cell *matCellDef="let row">                                                                            
   <mat-checkbox (click)="$event.stopPropagation()"                                                                                
     (change)="$event ? selection.toggle(row) : null;isSomeSelected()"                                                                               
     [checked]="selection.isSelected(row)">                                                                           
 </mat-checkbox></td>

Answer 1

您可以像這樣聲明索引let i = index ：

 <td mat-cell *matCellDef="let row;let i = index">                                                                            
   <mat-checkbox (click)="$event.stopPropagation()"                                                                                
     (change)="$event ? selection.toggle(row) : null;isSomeSelected()"                                                                               
     [checked]="selection.isSelected(row)">                                                                           
 </mat-checkbox></td>

Answer 2

在您的.ts中，將index定義為RowModel的一個屬性。

然后您可以使用模板中的row.index和 controller 訪問它。

.ts ：

const ELEMENT_DATA: PeriodicElement[] = [
  {position: 1, name: 'item1', index: 0},
  {position: 2, name: 'item2', index: 1},
  {position: 3, name: 'item3', index: 2},
];

.html ：

<td mat-cell *matCellDef="let row">                                                                            
  <mat-checkbox (click)="$event.stopPropagation()"                                                                                
                (change)="$event ? selection.toggle(row) : null;isSomeSelected()"                                                                               
                [checked]="selection.isSelected(row)">                                                                       
  </mat-checkbox>
  <span>{{row.index}}</span>
</td>