Пагинация в угловом материале по данным, полученным с API - PullRequest
Новая
       21

Пагинация в угловом материале по данным, полученным с API

0 голосов
/ 29 июня 2018

Я получаю список из 100+ пользователей, извлеченных из API. Теперь я хотел бы реализовать эти данные в таблице угловых материалов.

Возможно ли во внешнем интерфейсе отображать только 10 пользователей в размере страницы и иметь нумерацию страниц. Я пытался, но он отображает всех доступных пользователей, хотя у меня реализован модуль разбиения на страницы. 

<mat-paginator [pageSize]="10" showFirstLastButtons></mat-paginator>

В машинописном коде я получаю список от родительского компонента. 

import {Component, OnInit, ViewChild, Input, OnChanges} from '@angular/core';
import {MatPaginator, MatTableDataSource} from '@angular/material';

@Component({
  selector: 'app-users',
  templateUrl: './users.component.html',
  styleUrls: ['./users.component.scss']
})
export class UsersComponent implements OnInit, OnChanges {
  @Input() users;

  displayedColumns = ['name', 'id'];
  dataSource;

  @ViewChild(MatPaginator) paginator: MatPaginator;

  constructor() { }

  ngOnChanges() {
    this.dataSource = new MatTableDataSource<any>(this.users);
  }

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

Любая помощь приветствуется. Спасибо

1 Ответ

0 голосов
/ 29 июня 2018

В любом случае, я заставил это работать. Ввод пагинатора в ngOnChanges

ngOnChanges() {
    this.dataSource = new MatTableDataSource<any>(this.users);
    this.dataSource.paginator = this.paginator;
}
...