【问题标题】:Angular 2 : increment *ngFor by 2 or implementing two paginations with in a PaginationAngular 2:将 *ngFor 增加 2 或在分页中实现两个分页
【发布时间】:2017-12-23 22:07:48
【问题描述】:

我对 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-->

(第二个 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-->

(第三个 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-->

现在,如果我不将第一个 ngFor 增加 2,则在下一页中将再次显示第二个用户,我不想这样做。

我要么必须增加 2,要么为两个孩子单独实现分页,我不能在一个 for 循环中做到这一点

我想要的是在一个分页中实现两个单独的分页

Object1.name object1.address.street object1.address.pin -- 分页显示其他地址。

Object2.name object2.address.street object2.address.pin -- 第二个分页显示其他地址。 --主分页,点击后将显示另外两个对象详细信息

【问题讨论】:

    标签: html angular angular2-template ngfor


    【解决方案1】:

    增加2

    <div *ngFor="let item of items; let even = even;">
      <div *ngIf="even">
        // content
      </div>
    

    【讨论】:

      【解决方案2】:

      我认为您不能将*ngFor 增加 2,因为它的目的是显示数组类型的数据;另外我不太了解您的要求。

      但是,您可以将 *ngIf% 运算符结合使用,以免对每个第二个条目做出反应。

      这样就可以了

      <li *ngFor="let item of items; let i = index">
        <span *ngIf="i % 2 === 0"> // or <ng-template if it is better here>
      

      对于任何迭代大小都可以实现相同的效果。只需将2 替换为例如10 递增 10。

      【讨论】:

      • 如果事情变得更复杂,你也可以使用 [ngSwitch}。一个例子在这里:angular-2-training-book.rangle.io/handout/directives/…
      • @JGFMK 它在这里没有任何意义......是吗?
      • 不适用于这个特定的用例。但我在想其他人稍后会来线程,有类似的问题,需要3个或更多的变化......也许重新渲染标题,标题+描述, 标题+描述+叙述等...
      • *ngIf="i % 2 === 0 无济于事,因为我想显示该页面中的两条记录。在这种情况下,第二页将不显示任何记录,而第三页将显示两条类似的记录。
      • 我想要的是在一个分页中实现两个单独的分页 Object1.name object1.address.street object1.address.pin -- 分页显示其他地址。 Object2.name object2.address.street object2.address.pin -- 第二个分页显示其他地址。 --主分页,点击后将显示另外两个对象详细信息
      猜你喜欢
      • 2023-03-05
      • 2019-05-04
      • 1970-01-01
      • 2018-07-01
      • 1970-01-01
      • 1970-01-01
      • 2017-05-04
      • 1970-01-01
      • 2013-01-30
      相关资源
      最近更新 更多