Angular 带ngrx/store的角度分页表

我在ngrx商店使用Angular 8。我不知道如何在现有代码上实现分页。我想使用ngb分页，如果可能的话，如果不是请给我一些解决方案，看看例子。我看到了一些添加分页的例子，但它们没有nrgx存储，对我来说，有必要包含在我的项目中

fetch-component.ts：

import { Component, OnInit } from '@angular/core';
import { Contacts } from 'src/app/models/contacts';
import { Store, select } from '@ngrx/store';
import { AppState } from '../state/app.state';
import { Observable, BehaviorSubject } from 'rxjs';
import { FetchContacts, DeleteContacts } from 'src/app/state/actions/contacts.actions';
import { getContactss } from 'src/app/state/reducers/contacts.reducer';

@Component({
  selector: 'app-fetch-contacts',
  templateUrl: './fetch-contacts.component.html',
  styleUrls: ['./fetch-contacts.component.css']
})
export class FetchContactsComponent implements OnInit {
  loading$: Observable<Boolean>;
  error$: Observable<Error>;


  public contList: Observable<Contacts[]>;

  constructor(private store: Store<AppState>, ) {
  }

  ngOnInit() {
    this.fetchData();
  }

  delete(contactsID, contactFirst, contactLast) {
    const ans = confirm('Do you want to delete contact: ' + contactFirst + ' ' + contactLast + '?');
    if (ans) {
      this.store.dispatch(DeleteContacts({ id: contactsID }));
    }
  }

  fetchData() {
    this.store.dispatch(FetchContacts());
    this.contList = this.store.pipe(select(getContactss));
    this.loading$ = this.store.select(store => store.contacts.loading);
  }

}

---

在组件中设置默认页面大小，除非您真的想将其移动到应用商店中

ngOnInit() {
  .
  .
  .
  this.pageSize = ?;
  this.page = 1;
}

最重要的是，除非你真的想在你的商店里处理所有这些逻辑，否则我建议用ngIf包装你的桌子。这允许您在*ngFor中准备好集合，拼接逻辑将处理显示的内容

<div *ngIf="contList | async as contactList">
  <table>
    <tr *ngFor=let cont of contactList " | slice: (page-1) * pageSize : (page-1) 
       pageSize + 
         pageSize">
      <!-- content here -->
    </tr>
  </table>
  ...
  <ngb-pagination [collectionSize]="contactList.length" [(page)]="page" [pageSize]="pageSize">
  </ngb-pagination>
</div>

...

希望这能让你走上正确的道路

ngOnInit() {
  .
  .
  .
  this.pageSize = ?;
  this.page = 1;
}

<div *ngIf="contList | async as contactList">
  <table>
    <tr *ngFor=let cont of contactList " | slice: (page-1) * pageSize : (page-1) 
       pageSize + 
         pageSize">
      <!-- content here -->
    </tr>
  </table>
  ...
  <ngb-pagination [collectionSize]="contactList.length" [(page)]="page" [pageSize]="pageSize">
  </ngb-pagination>
</div>