Массив [] при загрузке страницы - PullRequest
Новая
       30

Массив [] при загрузке страницы

0 голосов
/ 16 января 2019

Я пытаюсь выяснить, почему массив [], даже если я вызываю API в методе ngOnInit (), но если я нажимаю кнопку следующей страницы на моей странице, массив больше не равен []. Что для меня странного в том, что если я использую 

*ngFor="let item of users"

покажет, без проблем.

Файл TS: 

export class DisplayAccountsComponent implements OnInit {
  // MatPaginator INPUT
  length: number;
  pageSize = 1;
  pageSizeOptions: number[] = [1, 5, 10 , 25, 50];

  users: User[] = [];
  activePageDataChunk = [];

  constructor(private _displayAccountService: DisplayAccountsService) {
  }

  ngOnInit() {
    this.getAllUsers();
    this.activePageDataChunk = this.users.slice(0, this.pageSize);
    console.log(this.users);
    console.log(this.activePageDataChunk);
  }

  onPageChanged(e) {
    const firstCut = e.pageIndex * e.pageSize;
    const secondCut = firstCut + e.pageSize;
    this.activePageDataChunk = this.users.slice(firstCut, secondCut);
    console.log(this.activePageDataChunk);
  }

  getAllUsers() {
    this._displayAccountService.getAllUsers().subscribe(
      data => {
        this.users = data;
        this.length = this.users.length;
      },
      err => {
        console.log(err);
      }
    );
  }

А также файл HTML: 

<div *ngFor="let user of activePageDataChunk">
   <p>{{user.firstName}} | {{user.lastName}} | {{user.email}}</p> 
</div> 
<mat-paginator [length]="length" [pageSize]="pageSize"
[pageSizeOptions]="pageSizeOptions" (page)="onPageChanged($event)">
</mat-paginator>

Как я уже сказал, когда страница загружается пользователями, activePageDataChunk равны [], но если я нажимаю следующую страницу, переменные больше не равны []. Заранее спасибо за любую помощь!

1 Ответ

0 голосов
/ 16 января 2019

getAllUsers() делает асинхронный запрос. Строка this.activePageDataChunk = this.users.slice(0, this.pageSize); будет выполнена до завершения асинхронного запроса, и поэтому this.users, а также this.activePageDataChunk будут пустыми массивами. Как только запрос завершится, он заполнит данные this.users, и после нажатия кнопки «Следующая страница» эта строка this.activePageDataChunk = this.users.slice(firstCut, secondCut); впервые заполнит данные activePageDataChunk данными, следовательно, вы сможете увидеть данные, щелкнув следующую страницу.

Чтобы решить эту проблему, вы можете просто изменить свой код на следующий: 

ngOnInit() {
  this._displayAccountService.getAllUsers().subscribe(
    data => {
      this.users = data;
      this.length = this.users.length;
      this.activePageDataChunk = this.users.slice(0, this.pageSize);
    },
    err => {
      console.log(err);
    }
  );
}
...