带有ngrx / store的角度分页表答案

【问题标题】：Angular pagination table with ngrx/store带有ngrx / store的角度分页表
【发布时间】：2019-12-29 07:32:17
【问题描述】：

我正在使用 Angular 8 和 ngrx 商店。我不知道如何在我现有的代码上实现分页。如果可能的话，我想使用 ngb-pagination，如果不是，请给我一些解决方案，看看例子。我看到几个添加分页的示例，但它们没有 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);
  }

}

fetch-component.html:

<div class="container-fluid">
<h4>Contact informations: </h4>

<p *ngIf="loading$ | async"><em>Loading... Please wait...</em></p>
<br>
<p>
    <a [routerLink]="['/register-contacts']"><i class="fa fa-address-card"></i> Create New</a>
</p>

<table class='table table-hover'>
    <thead>
        <tr>
            <th style="display:none!important;">Id:</th>
            <th><i class="fa fa-user"></i> First Name:</th>
            <th><i class="fa fa-user"></i> Last Name:</th>
            <th><i class="fa fa-map-marker"></i> Address:</th>
            <th><i class="fa fa-phone"></i> Telephone:</th>
            <th><i class="fa fa-toggle-on"></i> Actions:</th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let cont of contList | async">
            <td style="display:none!important;">{{ cont.id }}</td>
            <td>{{ cont.firstName }}</td>
            <td>{{ cont.lastName }}</td>
            <td>{{ cont.address }}</td>
            <td>{{ cont.telephone }}</td>
            <td>
                <a [routerLink]="['/contacts/edit/', cont.id]"><i class="fa fa-edit"></i></a> |
                <a [routerLink]="" (click)="delete(cont.id, cont.firstName, cont.lastName)"><i class="fa fa-remove"></i></a>
            </td>
        </tr>
    </tbody>
</table>
<div class="d-flex justify-content-between p-2">
    <ngb-pagination [collectionSize]="collectionSize" [(page)]="page" [pageSize]="pageSize">
    </ngb-pagination>
  </div>
</div>

contacts-effect.ts：

loadContacts$ = createEffect(() =>
    this.actions$.pipe(
        ofType(FetchContacts),
        switchMap(() =>
            this._contactsService.getContacts().pipe(
                map((contactss) => LoadContactsSuccess({ contactss })),
                catchError(error => of(LoadContactsFailure({ error })))
            )
        )
    ),
);

【问题讨论】：

标签： angular pagination ngrx-store

【解决方案1】：

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

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>

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

【讨论】：