如何在Angular4的同一视图中使用ngx分页实现多分页？

我正在angular4中进行分页。我使用ngx分页来实现分页过程。我需要根据用户选择的类型应用分页。如果用户选择类别，我需要在页面加载时默认显示带有分页的类别数据，我需要使用分页显示所有数据。在这里，我面临的问题是，分页仅适用于类别数据。下面是我的代码：

从'@angular/core'导入{Component，OnInit}；
从'@angular/Http'导入{Http，Response，Headers，RequestOptions}；
从'@angular/Router'导入{Router}；
从“lodash”中导入*as uu；
从“../../pagination.service”导入{PaginationService}；
从“ng2woo”导入{WooApiService}；
从“../../search filter.pipe”导入{SearchFilterPipe}
@组成部分({
选择器：'应用程序产品'，
templateUrl:“./products.component.html”，
样式URL:['./products.component.css']
})
导出类ProductsComponent实现OnInit{
可见：布尔=假；
VisibleCegory:布尔值=true；
公共产品列表=[]；
公共类别=[]；
公共类别列表=[]；
catId：编号；
公共对象数组：数组=[“阿尔巴尼亚”、“安道尔”、“亚美尼亚”、“奥地利”、“阿塞拜疆”]；
总数：任何；
当前页面：编号；
构造函数（专用http:http，专用路由器：路由器，专用woo:WOOAPI服务）{
这个.getCategories（）；
}
createAuthorizationHeader（标题：标题）{
headers.append（'Authorization'，'Basic'+
btoa（'ck_543700D9F8C08268D75D3EFB302DF4FAD70A8F:cs_f1514261bbe154d662eb5053880d40518367c901'）；
headers.append（“内容类型”、“应用程序/json”）；
}   
getData（）{
let headers=新的headers（）；
此.createAuthorizationHeader（标题）；
返回此.http.get（“https://www.colourssoftware.com/wordpress/wp-json/wc/v2/products?page=1&per_page=10",{
标题：标题
})
.subscribe（数据=>{
const products=data.json（）；
console.log（data.headers）；
this.total=data.headers.get（'X-WP-TotalPages'）；
console.log（“Pages”，this.total）；
对于（var i=1；i{
log（“Error！：”，err）；
}
);
}   
getProducts（i）{
this.visibleCategory=true；
可见=假；
此.currentPage=i；
console.log（“cpage”+此.currentPage）；
let headers=新的headers（）；
此.createAuthorizationHeader（标题）；
返回此.http.get（“https://www.colourssoftware.com/wordpress/wp-json/wc/v2/products?per_page=10&page=“+this.currentPage{
标题：标题
})
.subscribe（数据=>{
const products=data.json（）；
对于（var k=0；k{
log（“Error！：”，err）；
}
); 
} 
getCategories（）{
console.log（'categories'）；
let headers=新的headers（）；
此.createAuthorizationHeader（标题）；
返回此.http.get（'https://www.colourssoftware.com/wordpress/wp-json/wc/v2/products/categories',{
标题：标题
})
.subscribe（数据=>{
const category=data.json（）；
控制台日志（类别）；
这个。类别=类别；
log（JSON.stringify（this.categories））；
},
错误=>{
log（“Error！：”，err）；
}
);
}
getCatProducts（id、计数）{
如果（计数{
const items=data.json（）；
console.log（items.length）；
this.categoryList=项目；
log（JSON.stringify（this.categoryList.length））；
},
错误=>{
log（“Error！：”，err）；
}
); 
}
}
产品（价值）{
this.router.navigate（['productdetails'，value]）；
}
恩戈尼尼特（）{
这是getData（）；
}
}

五五折优惠









快速查看


{{data.name}
价格{{数据.常规价格}



添加到购物车

快速查看


{{data.name}
价格{{数据.常规价格}



添加到购物车

<pagination-controls  id="some_id"
                  (pageChange)="pageChanged($event)"
                  maxSize="9"
                  directionLinks="true"
                  autoHide="true"
                  previousLabel="Previous"
                  nextLabel="Next"
                  screenReaderPaginationLabel="Pagination"
                  screenReaderPageLabel="page"
                  screenReaderCurrentLabel="You're on page">

 <pagination-controls id="pagination1"....>  </pagination-controls>
 <pagination-controls id="pagination2"....>  </pagination-controls>

<some-element *ngFor="let item of collection | paginate: { id: 'pagination1',
                                                      itemsPerPage: pageSize,
                                                      currentPage: p,
                                                      totalItems: total }">...</some-element>

 paginate: { id: 'versionPagination' .........other param}


 <pagination-controls id="versionPagination">
    </pagination-controls>