Com*_*ing 5 html angular2-template ngfor angular
我对 Angular 还很陌生,我想知道是否有任何方法可以将 ngFor 循环增加 2 而不是 1。
我正在尝试在一个分页中实现两个分页,为此需要将循环增加 2。
我正在获取包含带有 in 的对象的对象。假设用户及其地址列表。
(第一个NgFor是将用户分页2。如果我有15个用户。2个用户将显示在一个页面中)
li *ngFor="let user of Users | paginate: { itemsPerPage: 1, currentPage: p };let i = index"
{{user[i].firstName}} <--Displaying first userName-->
Run Code Online (Sandbox Code Playgroud)
(第二个 NgFor 是显示第一个用户的地址列表。假设他有 20 个地址。我将把它切成每页 3 或 4 个,并对其余部分进行分页)
*ngFor="let address of user[i].address| objectValues |slice:addresspageNumber*2-2:addressPageNumber*5 ; let j = index "
<--First child Pagination code-->
{{user[i+1].firstName}} <--Displaying second userName-->
Run Code Online (Sandbox Code Playgroud)
(第三个 NgFor 是显示第二个用户的地址列表。假设他有 20 个地址。我将把它切成每页 3 或 4 个,并对其余部分进行分页)
*ngFor="let address of user[i+1].address| objectValues |slice:addresspageNumber*2-2:addressPageNumber*5 ; let j = index ">
<th scope="row">{{address.streetno}}
<--Second child Pagination code-->
<--Parent Pagination code-->
Run Code Online (Sandbox Code Playgroud)
现在,如果我不将第一个 ngFor 增加 2,则在下一页中,将再次显示第二个用户,这是我不希望的。
我要么必须增加 2,要么分别为两个孩子实现分页,但我不能在一个 for 循环中完成它
我想要的只是在一个分页中实现两个单独的分页
object1.name object1.address.street object1.address.pin -- 分页显示其他地址。
object2.name object2.address.street object2.address.pin -- 显示其他地址的第二个分页。--主分页,单击后将显示另外两个对象详细信息
小智 6
增加 2
<div *ngFor="let item of items; let even = even;">
<div *ngIf="even">
// content
</div>
Run Code Online (Sandbox Code Playgroud)
我认为你不能增加*ngFor2,因为它的目的是显示数组类型的数据;另外我不太明白你的要求。
但是,您可以*ngIf与运算符结合使用%,以免对每个第二个条目都做出反应。
这可以完成工作
<li *ngFor="let item of items; let i = index">
<span *ngIf="i % 2 === 0"> // or <ng-template if it is better here>
Run Code Online (Sandbox Code Playgroud)
对于任何迭代大小都可以实现相同的效果。只需将 替换2为 例如10即可增加 10。
| 归档时间: |
|
| 查看次数: |
13641 次 |
| 最近记录: |