Angular 6上的分页

Question

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

我现在的问题是，如何在我的数据表上添加分页，以便创建一个响应式的表视图。

我现在的页面：

​

​

我的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，但是我不知道如何将我的数据与我将要创建的分页函数结合起来。

我应该怎么做才能让分页效果达到我的预期？

Answer 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