如何动态显示/隐藏mat-table中的某些行？

Question

我在Angular应用中使用了一个垫子表格组件，其中显示了一些体育赛事的结果。通常，我只想显示三个最佳结果，然后，当用户单击“省略号按钮”（如相关图片上的内容）时，该表应展开并显示其余的隐藏行。我在标记中使用* ngIf语句时遇到问题，因为不允许我使用*前缀使用多个属性。怎么用不同的方式呢？预先感谢。

<table mat-table [dataSource]="qualifyingResults" class="exo-2">
  <ng-container matColumnDef="position">
    <th mat-header-cell *matHeaderCellDef>POS</th>
    <td mat-cell *matCellDef="let result">{{ result.position }}</td>
  </ng-container>
  <ng-container matColumnDef="driver">
    <th mat-header-cell *matHeaderCellDef class="center-header">DRIVER</th>
    <td mat-cell *matCellDef="let result" class="text-center font-weight-bold">{{ result.Driver.code }}</td>
  </ng-container>
  <ng-container matColumnDef="time">
    <th mat-header-cell *matHeaderCellDef>TIME</th>
    <td mat-cell *matCellDef="let result">{{ result.time }}</td>
  </ng-container>
  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
</table>

Answer 1

您可以轻松地做到这一点。在您的数据源中，仅获取前3个结果。然后将省略号按钮单击事件绑定到一个函数，您可以在其中获取其余数据。然后更新数据源。

类似这样的东西：

reformulate()