Как динамически показать / скрыть несколько строк в mat-таблице?

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 результата.Затем свяжите событие нажатия кнопки с многоточием с функцией, где вы получите остальные данные.Затем обновите источник данных.

Примерно так:

dataSource: MatTableDataSource<any[]>;

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

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