Question

获得了特定行的索引值，需要更改其默认高度，该高度是我从其他函数动态获取的。因此，我分别拥有两个值，现在可以通过使用索引值i来改变特定的行高吗？

使用以下Javascript进行了尝试，它对于正常的HTML操作而言效果很好，但是角度不佳（不需要的结果）：

console.log("DynamicHeight: "+ dynHeight +"--> rowIndex: "+ rowIndexValue);

document.getElementById('dynamicTable').rows

    x[rowIndexValue].style.height=dynHeight

寻找角度6的解决方案，不胜感激！

Answer 1

您可能会跟踪关于单元格定义（*matCellDef="let element; let index = index"的索引，并绑定到<td> height属性（[style.height.px]="getRowHeight(index)"）：

component.html

<table mat-table [dataSource]="data" class="mat-elevation-z8">

  <ng-container matColumnDef="column_id_1">
    <th mat-header-cell *matHeaderCellDef> $implicit </th>
    <td mat-cell *matCellDef="let element; let index = index" [style.height.px]="getRowHeight(index)"> {{ element.column1 }} </td>
  </ng-container>

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

component.ts

  getRowHeight(index) {
    return index * 50; // do any calculations and return row height
  }

请注意，在此示例中，我直接绑定到[style.height.px]，但是您也可以绑定到不同的属性或以不同的方式绑定到高度。

此外，如果您的身高计算很简单，则可以直接将其绑定到模板上，而无需使用方法。

通过使用索引值动态更改Angular 6材料特定表行

1 个答案: