angular - ngx-bootstrap 正确的分页方式

Question

我决定从 ng-bootstrap 切换到 ngx-bootstrap，因为它有动画而且更完整。我在他们的文档中查看内容切换示例，但它需要一个额外的变量，这会导致更多问题，因为我的加载依赖于变量。完整代码在这里：https ://stackblitz.com/edit/angular-nkdzenbots.component.ts@Input() bots: BotListView[];

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

我只是在寻找一种正确的方法来做到这一点，因为不推荐使用 slice。内容切换示例对我来说看起来不错，但正如我上面解释的那样，我不能使用它，因为我必须更改加载条逻辑。你们怎么样？

机器人列表.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);
  }
}

机器人列表.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>

标签： angular