Блог

Я использую Angular с Material-Angular и хочу отображать данные из Reqres API (https://reqres.in ). Итак, я создал таблицу с нумерацией страниц, но моя нумерация страниц не работает.

Я создал сервис и модель для данных, которые я хочу сохранить, конечно, используя HttpClient. В классе компонентов я создал две переменные для хранения этих данных: users: User[] и dataSource = new MatTableDataSource<User>(this.user) .

 import { Component, OnInit, ViewChild } from '@angular/core';
import { User } from '../config/user.module';
import { DataService } from '../data.service';
import { MatPaginator, MatTableDataSource } from '@angular/material';

@Component({
  selector: 'app-users-list',
  templateUrl: './users-list.component.html',
  styleUrls: ['./users-list.component.sass']
})
export class UsersListComponent implements OnInit {
  users: User[];
  page: number;

  displayedColumns = ['Id', 'FirstName'];
  dataSource = new MatTableDataSource<User>(this.users);

  constructor(private dataService: DataService) { }

  @ViewChild(MatPaginator) paginator: MatPaginator;

  ngOnInit() {
    this.dataSource.paginator = this.paginator;

    this.showUsers();
  }

  showUsers() {
    this.page = 1;
    this.dataService.getUsers(this.page)
      .subscribe(res => {
        this.users = res['data'];
      });
  }

}
  

И мой template.html файл:

 <section class="list">
  <table mat-table [dataSource]="users" class="mat-elevation-z8 table">
    <ng-container matColumnDef="Id">
      <th mat-header-cell *matHeaderCellDef>
        <span class="table-header">No.</span>
      </th>
      <td mat-cell *matCellDef="let user">
        <span class="table-value">{{user.id}}</span>
      </td>
    </ng-container>
    <ng-container matColumnDef="FirstName">
      <th mat-header-cell *matHeaderCellDef>
        <span class="table-header">Name</span>
      </th>
      <td mat-cell *matCellDef="let user">
        <span class="table-value">{{user.first_name}}</span>
      </td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
  </table>
  <mat-paginator [pageSizeOptions]="[3]" showFirstLastButtons></mat-paginator>
</section>
  

Поэтому, когда я переключаюсь users dataSource в html-файле: <table mat-table [dataSource]="HERE" class="mat-elevation-z8 table"> , я не вижу никаких результатов в своей таблице.
Я думал dataSource , что это хорошо объявлено, тип User модели и получение данных, users но не работает. Если я изменю users все отображение очень хорошо, но мне нужно dataSource разбить на страницы. Проблема во времени, когда данные не существуют users во время вызова или что?

Использование: Angular-CLI 7

Привяжите свою директиву DataSource к объекту типа MatTableDataSource (не users), поскольку это поможет вам со всей сортировкой и нумерацией страниц.

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

Затем вам необходимо обновить объект MatTableDataSource, на который вы подписались на наблюдаемый (возвращаемый getUsers).

 showUsers() {
this.page = 1;
this.dataService.getUsers(this.page)
  .subscribe(res => {
    this.datasource = new MatTableDataSource(res['data']);
  });
  

Другой альтернативой является использование метода renderRows . Это может быть полезно, если вы вызываете API несколько раз, поскольку он обновляет строки для новых изменений.

Вот официальный stackbitz: https://stackblitz.com/edit/angular-mat-table-render-rows?file=app/table-filtering-example.ts