Angular 6 上的分页答案

【问题标题】：Pagination on Angular 6Angular 6 上的分页
【发布时间】：2019-07-14 23:57:31
【问题描述】：

我正在尝试制作一个包含用户名和成就的表格。这个动态数据刚刚由 MySQL 生成，我在 Angular 6 上使用函数 .subscribe 调用。

我现在的问题是，如何在我的数据表上添加分页以制作响应式表视图。

我现在的页面：

我的dashboard.component.ts

@Component({
  selector: 'app-dashboard',
  templateUrl: './activity-dashboard.component.html',
  styleUrls: ['./activity-dashboard.component.less'],
  encapsulation: ViewEncapsulation.None
})
export class ActivityComponent implements OnInit {
  tablePresetColumns;
  tablePresetData;

  constructor(
    private activityService: ActivityService,
    private router: Router
  ) {}

  public apiData;

  ngOnInit() {
    this.activityService.getAchievement().subscribe((res) => {
      this.apiData = res;
      var ids = [
        ['Username', 1],
        ['Role', 2],
        ['today', 3],
        ['weekly', 4],
        ['monthly', 5],
        ['yearly', 6]
      ];
      const result = Object.keys(res).map(o => ids.map(
        ([key, id]) => ({
          id,
          content: res[o][key]
        })));
      this.tablePresetData = result;
    });
  }
}

我的dashboard.component.html：

<div class="row">
  <div eds-tile class="xl-12">
    <eds-tile-title>User on Shift</eds-tile-title>
    <eds-tile-actions></eds-tile-actions>
    <eds-table [columns]="tablePresetColumns" [data]="tablePresetData" [modes]="['compact', 'dashed']"></eds-table>
    <div class="pagination-group">
      <ul class="pagination">
        <li class="disabled"><i class="icon icon-arrow-left"></i></li>
        <li class="active">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li></li>
        <li>10</li>
        <li><i class="icon icon-arrow-right"></i></li>
      </ul>
    </div>
</div>

到目前为止，我已经尝试将分页设置为 HTML，但我很困惑将我的数据与我将创建的分页函数结合起来。

我应该怎么做才能使分页按我的预期工作？

【问题讨论】：

标签： angular pagination angular6

【解决方案1】：

您可以使用ngx-pagination 包https://www.npmjs.com/package/ngx-pagination 而不是重新发明轮子

在你的模块中导入它

// app.module.ts
import {NgxPaginationModule} from 'ngx-pagination'; // <-- import the module

@NgModule({
    imports: [... NgxPaginationModule ...], // <-- include it in your app module
})
export class MyAppModule {}

在你的模板中

<div class="row">
  <div eds-tile class="xl-12">
    <eds-tile-title>User on Shift</eds-tile-title>
    <eds-tile-actions></eds-tile-actions>
    <eds-table [columns]="tablePresetColumns" [data]="tablePresetData" [modes]="['compact', 'dashed']"></eds-table>
    <div class="pagination-group">
      <ul>
        <li *ngFor="let item of collection | paginate: { itemsPerPage: 10, currentPage: p }"> ... </li>
      </ul>

      <pagination-controls (pageChange)="p = $event"></pagination-controls>
    </div>
</div>

其中p 是要显示的当前页面所以在你的组件中添加

public p: number = 1;

完整的文档可以在这里找到https://github.com/michaelbromley/ngx-pagination

【讨论】：