Question

我在项目中使用Angular 5。我使用ngx-pagination进行了分页。我需要执行此分页顶部和底部表格。我需要在表格的顶部和底部进行分页。我是这样做的

<div class="admin-panel__nav-block navigation-block">
        <app-table-filter-size (valueChange)="valueChange($event)" [size]="size"></app-table-filter-size>
        <pagination-controls class="table-pagination pagination-block" previousLabel="Previous" nextLabel="Next" id="listing_pagination" (pageChange)="pageChange(p = $event)"></pagination-controls>
    </div>

<!--Table --> 
...
<!--Table End --> 
    <div class="admin-panel__nav-block navigation-block">
        <app-table-filter-size (valueChange)="valueChange($event)" [size]="size"></app-table-filter-size>
        <pagination-controls class="table-pagination pagination-block" previousLabel="Previous" nextLabel="Next" id="listing_pagination" (pageChange)="pageChange(p = $event)"></pagination-controls>
    </div>

这是有效的，但这可能不是一个好习惯，因为在不同的地方使用了相同的ID。如何摆脱重复的代码？在这种情况下我该怎么办？

Answer 1

您需要使用id来唯一标识动态分配的地址，而不是硬编码id="listing_pagination"

具有paginationConfig数组并为每组数据推送配置

ts文件实现

private paginationConfigs: Array; // define the variable 
this.paginationConfigs = []; //initialize in the ngOnInit lifecycle function

可能在循环内为每个数据集进行以下配置

                const pagerConfig = {
                    id: `pager-${value}`, // value could be any unique identifer
                    itemsPerPage: 10,
                    currentPage: 1
                };
                this.paginationConfigs.push(pagerConfig);

html文件实现

<tr *ngFor="let item of mf.data| paginate: paginationConfigs[i]" >// data display </tr>

<pagination-controls previousLabel="Previous" nextLabel="Next [id]='paginationConfigs[i].id'(pageChange)="pageChange(paginationConfigs[i].currentPage= $event)"></pagination-controls>

如何在Angular中复制组件？

1 个答案: