Как ограничить строки в таблице матов и создать фильтр, чтобы даже фильтровать данные, которые находятся не в таблице, а в источнике данных? - PullRequest
Новая
       88

Как ограничить строки в таблице матов и создать фильтр, чтобы даже фильтровать данные, которые находятся не в таблице, а в источнике данных?

0 голосов
/ 29 мая 2020

Я новичок в angular и мат-столе. Я пытаюсь создать таблицу с помощью mat, который выполняет следующие функции -

  1. Отображает только 10 лучших пользователей.
  2. Создать фильтр для поиска пользователя, который может / не может быть в топ-10.

Я получаю данные из сервисного API. Я создал таблицу и отображаю пользовательские данные из API. Фильтр правильно фильтрует данные. Я хочу использовать все данные API, но отображать только первые 10 в таблице. Однако фильтр должен возвращать данные / пользователей, которые находятся / не входят в топ-10.

Html Файл - 

<mat-form-field>
  <mat-label>Search</mat-label>
  <input matInput (keyup)="applyFilter($event)" placeholder="Ex. ium">
</mat-form-field>
<br>

<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
  <ng-container matColumnDef="Name">
    <th mat-header-cell *matHeaderCellDef> Name </th>
    <td mat-cell *matCellDef="let element"> {{element.firstName}} </td>
  </ng-container>

  <ng-container matColumnDef="ID">
    <th mat-header-cell *matHeaderCellDef> ID </th>
    <td mat-cell *matCellDef="let element"> {{element.id}} </td>
  </ng-container>

  <ng-container matColumnDef="Rewards">
    <th mat-header-cell *matHeaderCellDef> Rewards </th>
    <td mat-cell *matCellDef="let element"> {{element.totalReward}} </td>
  </ng-container>

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

component.ts File- 

export class LeaderBoardTileComponent implements OnInit {

  dataSource;
  data: Candidate[];
  constructor(private myService: MyService) { }

  displayedColumns = ['Name','ID','Rewards'];

  ngOnInit() {
    this.myService.getUsers().subscribe(data => {
      this.dataSource = new MatTableDataSource(data);
      console.log("Data Source: ");
      console.log(this.dataSource);
    })
  }

  applyFilter(event: Event) {
    const filterValue = (event.target as HTMLInputElement).value;
    this.dataSource.filter = filterValue.trim().toLowerCase();
  }

  onSelect(element) {

  }
}

Любые предложения приветствуются!

...