ngx-bootstrap分页的正确方法

Question

我决定从ng-bootstrap切换到ngx-bootstrap，因为它具有动画并且更加完整。我在他们的documentation中查看了内容切换示例，但是它需要一个附加变量，此变量后来会引起更多问题，因为我在bots.component.ts中的加载依赖于@Input() bots: BotListView[];变量。完整的代码在这里：https://stackblitz.com/edit/angular-nkdzen

显然，不推荐使用slice方法。顺便说一下，下面的代码与StackBlitz的代码相同。

我只是在寻找一种合适的方法来这样做，因为不建议使用slice。 内容切换示例对我来说似乎不错，但是正如我在上面解释的那样，我无法使用它，因为必须更改加载栏逻辑。你们好吗？

bots-list.component.ts

import { Component, Input, Output, EventEmitter } from '@angular/core';

import { BotListView } from 'src/app/core/types/bot';

@Component({
  selector: 'app-bots-list',
  templateUrl: './bots-list.component.html',
  styleUrls: ['./bots-list.component.css']
})
export class BotsListComponent {
  @Input() bots: BotListView[];
  @Output() deleted = new EventEmitter<number>();
  @Output() selected = new EventEmitter<number>();

  page = 1;
  pageSize = 2;

  deleteBot(id: number) {
    this.deleted.emit(id);
  }

  editBot(id: number) {
    this.selected.emit(id);
  }
}

bots-list.component.html

<div class="table-responsive">
  <table class="table table-striped table-hover text-center mt-4">
    <thead>
      <tr>
        <th class="text-center">ID</th>
        <th class="text-center">Name</th>
        <th class="text-center">Status</th>
        <th class="text-center">Symbol</th>
        <th class="text-center">Interval</th>
        <th></th>
      </tr>
    </thead>
    <tbody>
      <tr
        *ngFor="let bot of bots | reverse | slice: (page - 1) * pageSize:(page - 1) * pageSize + pageSize; trackBy: bot?.id">
        <td class="align-middle">{{ bot.id }}</td>
        <td class="align-middle">{{ bot.name }}</td>
        <td class="align-middle">{{ bot.status }}</td>
        <td class="align-middle">{{ bot.cryptoPair.description }}</td>
        <td class="align-middle">{{ bot.timeInterval.description }}</td>
        <td class="align-middle">
          <button type="button" class="btn btn-outline-secondary" (click)="editBot(bot.id)">Edit</button> &nbsp;
          <button type="button" class="btn btn-outline-danger" (click)="deleteBot(bot.id)">Delete</button>
        </td>
      </tr>
    </tbody>
  </table>
</div>

<pagination [boundaryLinks]="true" [totalItems]="bots?.length" [(ngModel)]="page" [itemsPerPage]="pageSize">
</pagination>