[英]How do I make a copy of the component in Angular?
我在我的項目中使用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。 如何擺脫重復的代碼? 在這種情況下我該怎么辦?
您需要有一個id
來唯一標識動態分配的id
,而不是使用硬編碼的id="listing_pagination"
有一個paginationConfig數組並為每組數據推送配置
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);
<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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.