如何限制 ngFor 重复 Angular 中的某些项目?

2023-11-26

My Code:

<li *ngFor="let item of list; let i=index" class="dropdown-item" (click)="onClick(item)">
  <template [ngIf]="i<11">{{item.text}}</template>
</li>

我试图在任何时候只显示 10 个列表元素。正如建议的在这里回答,我使用了 ngIf 但这会导致页面上显示空列表项(超过 10 个)。


这对我来说似乎更简单

<li *ngFor="let item of list | slice:0:10; let i=index" class="dropdown-item" (click)="onClick(item)">{{item.text}}</li>

更接近你的方法

<ng-container *ngFor="let item of list; i as index">
  <li class="dropdown-item" (click)="onClick(item)" *ngIf="i<11">{{item.text}}</li>
</ng-container>

选择

<ng-template ngFor let-item [ngForOf]="list" let-i="index">
  <li class="dropdown-item" (click)="onClick(item)" *ngIf="i<11">{{item.text}}</li>
</ng-template>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何限制 ngFor 重复 Angular 中的某些项目? 的相关文章

随机推荐

  • 如何获取在其声明中实际键入的变量名称? [复制]

    这个问题在这里已经有答案了 可能的重复 在 C 中查找传递给函数的变量名 下面的类包含字段城市 我需要动态确定在类声明中键入的字段名称 即我需要从对象城市的实例中获取字符串 city 我尝试通过检查 DoSomething 中的 Type
  • 将 const 指针引用绑定到非常量指针

    int val2 38 int ptr val2 const int ptrRef ptr ERROR int i 92 int ref i i const int ref i2 ref i OK 为什么我不能有一个引用非常量指针的常量引用
  • Java XML处理实体问题?

    当我尝试运行 java 程序时出现以下错误 它应该读取 xml 文件并打印出一些内容 据我了解 有一个未引用的实体不属于 xml 标准的一部分 所以我的问题是 我该如何解决这个问题 Thanks Fatal Error subject xm
  • Java中n++ VS ++n的区别

    我的 Java 老师说最好使用 n 而不是 n 我没有看到这背后的逻辑 有人知道吗 n增加该值并返回新值 n 增加值并返回old one Thus n 需要额外的存储空间 因为它必须跟踪旧值 以便在增量后可以返回它 我预计这两者之间的实际差
  • 在一张表上创建多对多

    Flask SQLAlchemy 给出了example如何创建多对多关系 它是在两个不同的表之间完成的 是否可以在同一个表上创建多对多关系 例如 一个姐妹可以有很多姐妹 而她也可以有很多姐妹 我努力了 girl sister map db
  • 从 git diff 中排除目录

    我想知道如何从 Git diff 中排除整个目录 在本例中为 spec 我正在使用 git diff 命令为我们的整个软件版本创建一个差异 然而 规格的更改与此过程无关 只会带来麻烦 现在我知道我能做到 git diff previous
  • MySQL两列时间戳默认NOW值ERROR 1067

    我有如下所示的表格 为了解决一个默认问题nowMySQL的列限制我使用了如图所示的提示here CREATE TABLE IF NOT EXISTS mytable id INT NOT NULL AUTO INCREMENT create
  • 使用另一个节点版本重新编译节点依赖项

    我想安装一些依赖项 在本例中安装 node pty 但是当我运行它时 他们给了我这个错误 错误 模块 home dev Documents project node web kit node modules node pty build R
  • 为什么结构/联合兼容性需要标记和名称相等?

    C99标准第6 2 7 1节中有以下语言 如果它们的标签和成员满足以下要求 则在单独的翻译单元中声明的两个结构体 联合或枚举类型是兼容的 如果其中一个使用标签进行声明 则另一个应使用相同的标签进行声明 如果两者都是完整类型 则适用以下附加要
  • 根据列类型对数据框中的变量进行子集化

    我需要根据列类型对数据帧进行子集化 例如 从具有 100 列的数据帧中 我只需要保留那些具有类型的列factor or integer 我已经编写了一个简短的函数来执行此操作 但是 CRAN 上有没有更简单的解决方案或一些内置函数或包 我当
  • 当 Java 8 Stream 抛出 RuntimeException 时,预期的行为是什么?

    当遇到一个RuntimeException在流处理期间 流处理是否应该中止 应该先完成吗 是否应该重新抛出异常Stream close 异常是按原样重新抛出还是被包装 JavaDoc 的Stream和包装java util stream对此
  • 如何使用中文版 mPDF

    我正在使用 mPDF 将表单输入数据保存到 PDF 对于英语来说 它工作得很好 任何人都可以使用此代码将 HTML 表单数据保存为 PDF 问题 为了满足我的项目要求 我需要使用中文 我当前的代码不适用于此 表单 html
  • Android GridView 按钮单击处理程序

    我有一个安卓GridView与ImageView TextView和两个Button s 网格看起来很好 但我发现很难处理其中的按钮事件GridView 我是安卓新手 任何帮助 将不胜感激 Thanks 如果您希望按钮 以及其他任何内容 在
  • 如何克隆 Servlet 容器提供的分离的 HttpServletRequest 和 HttpServletResponse?

    我想实现以下逻辑 当我在主servlet的doService方法 在主web容器线程中 收到HttpServletRequeset和HttpServletResponse时 我启动A B C三个线程 由我自己的程序管理的线程 以并行模式处理
  • JQuery 文件上传在单独的 Post 请求中发送每个文件?

    我的问题既简单又复杂 我尝试使用 jQuery fileUpload 库和 spring mvc 控制器作为服务器端上传文件 但我的文件每个都由一个请求上传 我想要的是将它们全部发布在一个请求中 我努力了单文件上传 假选项 但它不起作用 如
  • 使用 Zend Action Helper ContextSwitch 创建自定义 JSON 响应对象

    我通常将编码的 json 对象附加到响应正文 但是现在我遇到了需要使用 ContextSwitch 操作助手的情况 我有一个 Zend Form 需要三个不同的响应上下文 html 将表单渲染为普通 html 在布局内 html 部分 渲染
  • .NET 中最简单的键/值对文件解析

    我的项目需要一个文件 我将在其中存储用户应该能够读取和修改的键 值对数据 我希望程序只期望键在那里 并且我想尽快从文件中解析它们 我可以将它们存储在 XML 中 但是 XML 太复杂了 它需要遍历节点和子节点等等 我想要的只是一些接受文件并
  • 在 ddply 中使用 ifelse 和转换

    我正在尝试使用ddply with transform填充一个新变量 summary Date 在带有变量的数据框中ID and Date 变量的值是根据正在评估的片段的长度来选择的ifelse 如果给定月份内某个 ID 的观测值少于 5
  • ScrollView 正在捕获谷歌地图的触摸事件

    我有一个水平滚动视图 其中包含视图组的层次结构 最后是谷歌地图 我的问题是 HSV 正在捕捉地图上的左右阻力 我试过了 hsv requestDisallowInterceptTouchEvent true 乃至 mapView getPa
  • 如何限制 ngFor 重复 Angular 中的某些项目?

    My Code li class dropdown item li