angular - 如何动态显示/隐藏垫表中的某些行？

Question

我在我的 Angular 应用程序中使用了一个 mat-table 组件，其中显示了一些体育赛事的结果。通常，我只想显示三个最佳结果，然后，当用户单击“省略号按钮”(如相关图片)时，表格应该展开并显示其余的隐藏行。我在标记中使用 *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 个结果。然后将省略号按钮单击事件绑定(bind)到一个函数，您可以在其中获取其余数据。然后更新数据源。

像这样:

dataSource: MatTableDataSource<any[]>;

ngOnInit() {
  this.getThreeResults.subscribe(
    data => this.dataSource = new MatTableDataSource(data)
  )
}

onEllipsisButtonClick() {
  this.getRestOfTheData.subscribe(
    data => this.dataSource.data = data
  )
}