时间戳

首页 > 解决方案 > 如何使用 Angular 6 在表格分页上实现自动滑动？

angular - 如何使用 Angular 6 在表格分页上实现自动滑动？

问题描述

是否可以使用 Carousel 并在表格上使用我的分页或与自动滚动表格页面相关的任何内容？

我试过实现轮播，但它似乎根本不起作用。

在此处输入图像描述

仪表板.component.html

<div class="row" >
<div eds-tile class="xl-12" style="width: 700px">
    <eds-tile-title>User on Shift</eds-tile-title>
<ngb-carousel *ngIf="carousel">
  <ng-template ngbSlide>
    <table class="table">
      <thead>
       <tr>
       <th *ngFor="let col of tablePresetColumns">
       {{col.content}}
       </th>
       <th></th>
       <th></th>
       </tr>
      </thead>
      <tbody>
        <div *ngIf='!tablePresetData' class="loading large"></div>
       <tr *ngFor="let row of tablePresetData | paginate: { itemsPerPage: 11, currentPage: p }; ">
        <td *ngFor="let cell of row"> {{cell.content}}</td>
       </tr>
      </tbody>
              <pagination-controls (pageChange)="p = $event"></pagination-controls>  
  </table>
  </ng-template>
</ngb-carousel>
</div>

然后，我的dashboard.component.ts

constructor(private activityService: ActivityService, private router: Router) { }
public apiData;
public carousel;
public tables;

ngOnInit() {

this.carousel = [1,2,3,4,5,6,7,8,9,10,11,12].map(()=> 'p:number = ${Math.random()}');

this.activityService.getAchievement().subscribe((res) =>  {
  this.apiData = res;

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

如果有人可以提供帮助，我有奖金，谢谢

标签： angularcarouselangular-carousel

解决方案

你可以使用 ngx-pagination 来做你的分页，使用起来非常简单。安装方式： npm install ngx-pagination --save

以下链接中的示例 在 此处输入链接描述

问候。

推荐阅读