首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何在*ngFor中每3个元素后添加div

在*ngFor中每3个元素后添加div,可以通过以下方式实现:

  1. 在HTML模板中,使用*ngFor指令遍历要显示的元素列表,并使用ng-container元素包裹每个元素。ng-container元素在渲染时不会生成实际的DOM元素。
代码语言:txt
复制
<ng-container *ngFor="let item of items; let i = index">
  <!-- 显示元素的内容 -->
  <div>{{ item }}</div>
  
  <!-- 每3个元素后添加div -->
  <div *ngIf="(i + 1) % 3 === 0"></div>
</ng-container>
  1. 在组件类中,定义一个items数组,用于存储要显示的元素列表。
代码语言:txt
复制
export class YourComponent {
  items: string[] = ['元素1', '元素2', '元素3', '元素4', '元素5', '元素6', '元素7', '元素8', '元素9', '元素10'];
}

上述代码中,ng-container元素用于包裹每个要显示的元素,并使用ngFor指令遍历items数组。在每个元素后,使用ngIf指令判断当前元素的索引是否为3的倍数,如果是,则添加一个空的div元素。

这样,每3个元素后都会添加一个div元素。

注意:以上示例中的代码是Angular框架的示例,ngFor和ngIf是Angular中的指令。如果你使用其他前端框架或库,可以根据相应的语法和指令进行实现。

关于腾讯云相关产品和产品介绍链接地址,由于要求不能提及具体品牌商,无法提供相关链接。但腾讯云提供了丰富的云计算产品和解决方案,你可以访问腾讯云官方网站,查找相关产品和文档。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Angular 结构指令模式 - 它们是什么且怎么使用

在 Angular ,有两种类型的指令。属性指令修改 DOM 元素的外观或者行为。结构指令添加或者移除 DOM 元素。 结构指令是 Angular 中最强大的特性之一,然而它们却频繁被误解。...这些指令可以添加、移除或者替换元素。结构指令在其名字之前都有 * 符号。 在 Angular ,有三种标准的结构化指令。...要使用结构指令,我们需要在 HTML 模版添加一个带有指令的元素。然后根据我们在指令设置的条件或者表达式添加、删除或者替换元素。 结构指令的例子 我们添加些简单的 HTML 代码。...当表达式是 false 的时候,*ngIf 指令移除 HTML 元素。当为 true 时候,元素的副本会添加到 DOM 。...Angular 我们什么时候需要用结构指令呢? 如果你想在 DOM 添加或者移除一个元素的时候,你就应该使用结构指令。 当然,我们还可以使用它们来更改元素 CSS 样式,或者添加事件监听器。

3.8K20

AngularDart4.0 英雄之旅-教程-04明细 顶

在此页面,您将扩展“Tour of Heroes”应用程序,以显示英雄列表,并允许用户选择英雄并显示英雄的详细信息。 完成此页面,该应用应该看起来像这个实例(查看源代码)。...-- each hero goes here --> 下一步你将添加英雄名字 使用ngFor指令罗列英雄 目标是将组件的英雄列表绑定到模板,迭代它们,并单独显示它们。...它表示元素及其子元素构成一个主模板。 ngFor指令遍历组件的英雄列表并为该列表的每个英雄呈现该模板的一个实例。...刷新浏览器,该应用程序不再失败,名称列表再次显示在浏览器。 当没有选定的英雄时,ngIf指令从DOM移除英雄详情HTML。 没有英雄细节元素或绑定担心。...您了解了如何在组件模板中使用核心指令ngIf和ngFor。 您在CSS文件定义了样式,并使用它们来设置应用程序的样式。 你的应用应该看起来像这个实例(查看源代码)。

3K30
  • AngularDart4.0 指南- 模板语法二 顶

    NgFor:为列表的每个项目重复一个模板。 NgSwitch:只显示多个可能元素的一个。 NgIf  您可以通过向该元素应用NgIf指令(称为宿主元素)来添加或移除DOM元素。...下面是NgFor应用于的例子: {{hero.name}} 您也可以将NgFor应用于组件元素,如下例所示: <hero-detail...*ngFor和trackBy NgFor指令可能表现不佳,特别是在大型列表。 对一个项目,删除项目或添加项目的小改动可以触发DOM操作的级联。...它别无选择,只能拆除旧的DOM元素并插入所有新的DOM元素。 Angular可以通过trackBy避免这种流失。 向组件添加一个返回NgFor应跟踪值的方法。 在这个例子,这个值就是英雄的ID。...模板引用变量警告说明 模板引用变量(#phone)与模板输入变量(let phone)不同,您在*ngFor可能看到的那样。 了解“结构指令”指南中的差异。 引用变量的范围是整个模板。

    30K20

    AngularDart 4.0 高级-结构指令 顶

    它们通常通过添加,移除或操纵元素来塑造或重塑DOM的结构。 与其他指令一样,您将结构指令应用于宿主元素。 然后该指令会执行它应该对该宿主元素及其后代所做的任何操作。 结构指令很容易识别。... ngIf指令不会隐藏CSS元素。 它从DOM物理添加和删除它们。 使用浏览器开发人员工具确认事实,以检查DOM。 ? 顶部段落在DOM。...其余的,包括它的class属性,移动到元素。 这些形式都没有实际呈现。 只有最终产品在DOM结束。 ?...ngFor字符串之外的所有内容仍在宿主元素()且移动到时保持不变。 在这个例子,[ngClass] =“odd”保留在上。...{{hero.name}} 如果没有宿主元素,通常可以将内容包装在本机HTML容器元素,然后将该指令附加到该容器

    16.1K20

    Angular 显示英雄列表

    列出这些英雄 打开 HeroesComponent 的模板文件,并做如下修改: 在顶部添加  然后添加表示无序列表的 HTML 元素() 在  插入一个  元素,以显示单个...它会为列表的每项数据复写它的宿主元素。 在这个例子  就是 *ngFor 的宿主元素 heroes 就是来自 HeroesComponent 类的列表。...添加 click 事件绑定 再往  元素上插入一句点击事件的绑定代码: heroes.component.html  。 并且为这个 div 添加 Angular 的 *ngIf 指令,把它的值设置为 selectedHero。...所选英雄的颜色来自于你前面添加的样式的 CSS 类 .selected。 所以你只要在用户点击一个  时把 .selected 类应用到该元素上就可以了。

    4K30

    Angular 6.x 指令快速入门

    Component):用于构建UI组件,继承于 Directive 类 属性指令(Attribute Directive):用于改变组件的外观或行为 结构指令(Structural Directive):用于动态添加或删除...(图片来源于网络) 第一节 - 创建指令 在 Angular ,我们可以使用 HostBinding 装饰器,实现元素的属性绑定。...>Hello, Angular `, }) export class AppComponent { } 第四节 - 获取宿主元素属性值 在 Angular ,我们可以通过 Attribute...在 Angular ,我们可以通过 ViewChild 装饰器来获取视图中定义的模板元素,然后利用 ViewContainerRef 对象的 createEmbeddedView() 方法,创建内嵌视图... 经过微语法解析器解析,将生成以下模板: <ng-template ngFor let-item [ngForOf]="items" let-i="index" [ngForTrackBy]

    3.2K40

    AngularDart4.0 指南- 表单 顶

    添加angular_forms Angular表单功能位于angular_forms库,该库位于其自己的包。 将该包添加到pubspec依赖项: ?...使用* ngFor添加powers 英雄必须从一个固定的机构批准的权力列表中选择一个超级大国。 您在内部维护该列表(在HeroFormComponent)。...您将在表单添加一个select,并使用ngFor(先前在“显示数据”页面中看到的一种技术)将选项绑定到powers列表。...对你来说,这很简单: 在(增强的)表单元素上定义一个模板引用变量。 在多处的按钮引用该变量。 显示Model(可选) 提交表单目前没有视觉效果。 预期的演示。...模板引用变量,heroForm和name。 双向数据绑定([(ngModel)])。 用于验证和表单元素更改跟踪的NgControl 指令。

    17.5K30

    高级 Angular 组件模式 (5)

    实现 模板引用变量是获取某个元素、组件或者指令引用的一种方式,这个引用可以在当前的视图模板的任何地方使用。它们通常是以#baseToggle或者#myToggle="toggle"的语法声明的。...Note: 请注意作用域的问题,如果你使用或者是一个结构性指令,比如*ngIf或者*ngFor,它会在这个模板上创建一个新的作用域,之后在其内部声明的模板引用变量无法在该模板作用域以外使用...// app.component.html // someDiv is an HTMLDivElement 成果 Note: 在stackblitz,我通过打印模板引用变量所指向的类的名字...,我在这里再补充一些,如何在组件或者指令类的内部使用。...Note: 在类获取模板引用变量所指向的引用时,请格外注意你期望获取的引用类型,在例子,我们期望获取html元素,因此这里的引用类型是ElementRef,如果是指令或者组件,则分别要对应其类型的Type

    64120
    领券