Question

我试图通过选择单选按钮来获取表格的行。

我希望选择该行，以便能够获取所选行的实验ID，但是它在警报中告诉我“行索引为：未定义”。我的代码来自：https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_tr_rowindex

我尝试过：

displayRadioValue(int: any, x: any) {
  if (int == 1) {
    alert("Row index is: " + x.rowIndex);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<table mat-table [dataSource]="experiments" matSort style="margin-bottom: 1%">

  <ng-container matColumnDef="experiment_id">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> Experiment ID </th>
    <td mat-cell *matCellDef="let experiment"> {{experiment.experiment_id}} </td>
  </ng-container>

  <!-->And others parameters displayed
  <-->

    <ng-container matColumnDef="compare">
      <th mat-header-cell *matHeaderCellDef mat-sort-header> Compare </th>
      <!--<td mat-cell *matCellDef="let protocol"><i class="material-icons">favorite_border</i></td>-->
      <td mat-cell *matCellDef="let experiment" (click)="$event.stopPropagation()">
        <button mdcIconButton [on]="true">
      <mdc-icon mdcIconOn (click)="displayRadioValue(1, this)">radio_button_unchecked</mdc-icon>
      <mdc-icon (click)="displayRadioValue(2)">radio_button_checked</mdc-icon>
    </button>
      </td>
    </ng-container>

</table>

Answer 1

在垫子表中，您可以单独在td中使用let row和row.position，不要忘了添加到displayColumns：

displayedColumns: string[] = ['row','position', 'name', 'weight', 'symbol'];

  <ng-container matColumnDef="row">
    <th mat-header-cell *matHeaderCellDef> No. </th>
    <td mat-cell *matCellDef="let row"> {{row.position}} </td>
  </ng-container>
  ...
  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>

如果要在td中一起使用元素，请定义let element; let row

<ng-container matColumnDef="position">
    <th mat-header-cell *matHeaderCellDef> No. </th>
    <td mat-cell *matCellDef="let element;let row"> 
        {{element.position}}{{row.position}} 
    </td>
  </ng-container>
  ...
  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>

使用“ let”获取表格行

1 个答案: