Angular 2:将 *ngFor 加 2 或在 Pagination 中实现两个分页

2023-12-07

我对 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 循环中完成它

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

对象1.名称 对象1.地址.街道 对象1.地址.pin -- 分页显示其他地址。

对象2.名称 对象2.地址.街道 对象2.地址.pin -- 第二次分页显示其他地址。 --主分页,单击后将显示另外两个对象详细信息


增加 2

<div *ngFor="let item of items; let even = even;">
  <div *ngIf="even">
    // content
  </div>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Angular 2:将 *ngFor 加 2 或在 Pagination 中实现两个分页 的相关文章

随机推荐

  • 如何找到 PIE 二进制文件的加载重定位?

    我需要获取正在运行的进程中堆栈的基地址 这将使我能够打印 addr2line 可以理解的原始堆栈跟踪 运行的二进制文件被剥离 但 addr2line 可以访问符号 我设法通过检查 elf header 来做到这一点argv 0 我读取入口点
  • Rails 进程的互斥体

    通过 Passenger 或 Mongrel 部署 Rails 时 您会运行多个应用程序实例 在共享资源上建立互斥锁的最佳实践或模式是什么 例如写入本地文件或远程文件 我想确保两个进程不会同时写入同一资源 如果您只是需要防止多个编写者同时处
  • ASP.NET 中的带宽监控

    您好 我们正在 Asp Net 中开发一个多租户应用程序 每个租户都有单独的数据库 其中要求之一是监视每个租户的带宽使用情况 我尝试搜索 但没有找到有关该主题的太多帮助 我们希望准确监控每个租户使用了多少带宽 而每个租户可以拥有自己的顶级域
  • 在循环/foreach MVC 视图中动态生成表

    我现在正在编写一些非常糟糕的代码 在保存之前 我希望得到一些关于改进它的意见 我正在尝试构建一个每行三个单元格的 html 表格 如果集合有 5 个项目 则应呈现为两行 到目前为止我所写的代码不是很健壮 需要不断维护 但我不确定是否有其他工
  • PHP 脚本未在浏览器上运行

    我已经在我的系统上安装了 XAMPP 服务器以便能够使用 PHP 但是安装后 当我在浏览器上运行任何 php 脚本时 它不会运行 我没有看到任何输出 没有从本地主机检查 phpinfo 我看到版本 5 3 5 已安装 即使运行一个简单的 p
  • 正则表达式如何在任何地方排除特定字符或字符串[重复]

    这个问题在这里已经有答案了 the cat sat on the mat 假设这些是不同的条目 从您要搜索的内容中的任何位置排除特定字符 在本例中为 a 的正则表达式是什么 所以你会得到的点击是 the on the 或者如果它是一个单词
  • 在请求中传递标头的效果?

    我想知道当你传递标题时会有什么不同requests get即之间的差异requests get url headers and requests get url 我有这两段代码 from lxml import html from lxml
  • 我的 Spring Security 应用程序不会超出登录页面

    我刚刚启动了一个使用 Spring Security 进行身份验证的项目 该项目使用 Java 配置而不是 XML 这是我的 SecurityConfig java 类 Configuration EnableWebSecurity pub
  • 将 .txt 文件中的双精度数读入双精度数组 C++

    我正在尝试创建一个需要大量股票价格的程序 我将这些价格存储在 txt 文件中 每行一个双精度 数量未知 可能有数千 我无法将数据放入我可以操作的数组中 我已经几个小时无法解决这个问题了 每当我尝试从文件中读取数据然后将其转换为双精度时 我都
  • 使用 babel ES6 创建注释

    我实际上正在使用 babeljs 和 ES6 带有 js 文件 开发一个应用程序 我想知道是否可以创建注释 就像我们可以使用 typescript 一样 使用 babeljs 和 ES6 JavaScript 没有与 TypeScript
  • 来自用户输入的Python调用函数[重复]

    这个问题在这里已经有答案了 可以根据用户输入调用函数吗 像这样的东西 def testfunction function function a raw input fill in function name testfunction a 因
  • 如何确认多个 AJAX 调用已完成?

    document ready function list1 jqGrid url example1 php balabala gridComplete function list2 jqGrid url example2 php balab
  • 如何在 JMeter 中将变量从一个线程组传递到另一个线程组

    我有一个包含 2 个线程组的 JMeter 测试 第一个是单个线程 创建一些库存 第二个有多个线程 购买所有库存 我使用 BeanShell Assertions 和 XPath Extractors 来解析返回值 XML 并存储变量 例如
  • 删除 datagridview 标题中的排序箭头并将文本放在框的中心

    我正在开发一个项目 需要标题文本位于中心 当单击标题时它将进行排序 但问题是 有一个排序箭头图标 即使它没有显示 它也会将文本推到左侧 我想要实现的是 删除排序箭头并将文本置于中心但仍保留排序功能 p s 我尝试处理单元格事件绘制并重新绘制
  • 替换字符串中特定索引处的字符?

    我正在尝试替换字符串中特定索引处的字符 我正在做的是 String myName domanokz myName charAt 4 x 这会产生错误 有什么方法可以做到这一点吗 Java 中的字符串是不可变的 你无法改变它们 您需要创建一个
  • Java枚举和迭代器的区别

    这两个接口的具体区别是什么 做Enumeration比使用有好处Iterator 如果有人能详细说明 参考文章将不胜感激 查看 Java API 规范Iterator界面上 有关于之间差异的解释Enumeration 迭代器不同于 枚举有两
  • python asyncio 无法同时运行两个无限函数

    我一直在尝试同时运行两个功能 但一个功能似乎永远无法工作 除非我停止另一个功能 第一个函数每 30 秒发送一封电子邮件 而第二个函数每 5 秒打印一条简单的语句 组合起来 每 6 个 Hello Worlds 输出应发送一封电子邮件 然而
  • 如何在 AChartEngine 中禁用显示缩放窗格

    任何人都可以帮助我了解 AChartEngine 在这里 我需要的第一件事是不要在图表中显示缩放图标 也不显示 x y 标签 但我找不到任何解决方案 您可以使用XYMultipleSeriesRenderer方法 启用或禁用缩放和平移 如下
  • 使用Python的词云库时,为什么停用词没有被排除在词云之外?

    我想排除 The they 和 My 在我的词云中显示 我正在使用 python 库 wordcloud 如下所示 并使用这 3 个附加停用词更新停用词列表 但 wordcloud 仍然包含它们 我需要更改什么才能排除这 3 个单词 我导入
  • Angular 2:将 *ngFor 加 2 或在 Pagination 中实现两个分页

    我对 Angular 还很陌生 我想知道是否有任何方法可以将 ngFor 循环增加 2 而不是 1 我正在尝试在一个分页中实现两个分页 为此需要将循环增加 2 我正在获取包含带有 in 的对象的对象 假设用户及其地址列表 第一个NgFor是