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

如何将div直接放在由ngFor指令创建的div下?

要将div直接放在由ngFor指令创建的div下,可以使用ng-container元素来包裹ngFor指令和要插入的div。

ng-container是一个逻辑容器,不会在DOM中创建额外的元素,可以用来包裹结构,而不会影响布局。

以下是一个示例代码:

代码语言:txt
复制
<ng-container *ngFor="let item of items">
  <div>{{ item }}</div>
  <div>要插入的div内容</div>
</ng-container>

在上述代码中,ng-container元素包裹了ngFor指令和要插入的div。ngFor指令会根据items数组的内容创建多个div,而要插入的div会直接放在每个由ngFor指令创建的div下面。

这样做的好处是可以保持HTML结构的整洁性,同时也能满足将div直接放在由ngFor指令创建的div下的需求。

推荐的腾讯云相关产品:腾讯云云服务器(CVM)

腾讯云云服务器(CVM)是一种可随时扩展的云计算服务,提供高性能、可靠稳定的云服务器实例。您可以根据业务需求选择不同配置的云服务器,支持多种操作系统和应用场景。

产品介绍链接地址:腾讯云云服务器(CVM)

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

相关·内容

AngularDart 4.0 高级-结构指令

Angular拥有强大模板引擎,可以让我们轻松操纵元素DOM结构。 本指南介绍Angular如何用结构指令操纵DOM,以及如何编写自己结构指令来完成相同操作。 尝试一实例(查看源代码)。...该指南在谈论其属性以及指令功能时引用了指令类。 指南在描述如何将指令应用于HTML模板中元素时引用了属性(attribute)名称。...在应用结构指令之前,您可能想暂停一,以考虑添加和删除元素以及创建和销毁组件后果。 星号(*)前缀 当然,你注意到了指令名称星号(*)前缀,并想知道为什么它是必要以及它做了什么。...这个用例有一个简单解决方案:将*ngIf放在包裹*ngFor元素容器元素上。 一个或两个元素可以是一个temple,所以你不必引入额外HTML级别。... 创建指令创建组件类似。

16.1K20

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

展示英雄们     显示一个英雄列表,首先需要将英雄们添加到视图模板 模拟英雄     在lib / src以下文件中创建十个英雄列表:lib/src/mock_heroes.dart import...通过添加核心指令* ngFor修改标签。 ngFor前缀(*)是此语法关键部分。...这是你在ngFor指令中定义同一个英雄变量。 在用户输入页面和模板语法页面的事件绑定部分了解有关事件绑定更多信息。...在结构指令页面和模板语法页面的内置指令部分阅读有关ngIf和ngFor更多信息。 格式化选中hero 当选择英雄细节显示在列表下方时,很难在列表中识别选定英雄。...您将Hero类移到lib / src自己文件中。 你增加了选择英雄和显示英雄细节能力。 您了解了如何在组件模板中使用核心指令ngIf和ngFor

3K30
  • ng-content 中隐藏内容

    有时你只需要将其包装在额外容器中即可应用 ngIf 或 ngSwitch。无论什么原因,通常情况,你内部组件不是包装器直接子节点。...Time to poke and prod 我们从一个简单实验开始:将两个 块放在我们模板中,没有选择器。会出现什么情况?...但是如果你通过按钮进行切换操作,你会注意到计数器值不会增加。这意味着我们计数器组件只被实例化了一次 - 从未被销毁和重新创建。...难道这是 ngIf 指令产生问题,让我们测试一 ngFor 指令,看看是否有同样问题: import { Component } from '@angular/core'; @Component...让我们再验证一 *ngFor 指令: @Component({ selector: 'wrapper', template: ` <div class="box" *ngFor="let

    2.7K30

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

    幸运是,Angular NgModel指令是一个使元素形成双向绑定桥梁。 内置指令 早期版本Angular包含了七十多个内置指令。 社区贡献了更多,并且为内部应用程序创建了无数私人指令。...= null">Hello, {{nullHero.name}} 另请参阅下面描述安全导航操作符。 NgFor NgFor是一个迭代指令 - 一种呈现项目列表方式。...模板输入变量 hero之前let关键字创建一个名为hero模板输入变量。 ngFor指令迭代父组件heroes属性返回heroes,并在每次迭代期间将hero设置为列表中的当前项目。...如果您尝试设置*ngSwitch,则会出现错误,因为NgSwitch是一个属性指令,而不是结构指令。 它改变了其同伴指令行为。 它不直接操作DOM。...指令名很少描述属性作用。 myClick指令名称对于发出点击消息属性不是一个好名字。 幸运是,您可以创建符合常规期望属性公共名称,同时在内部使用不同名称。

    30K20

    【Appetite】ionic3实录(七)次页实现及分析解决问题【上】

    现在开始实现这个页面,步骤如下: 一、先创建数据 在src/app/assets/data目录创建dessert-slides.json文件并添加如下内容作为轮播图数据源: { "success".../assets/imgs/foods/2.jpg" }] } 二、创建数据服务 执行命令创建数据服务aboutProvider: ionic g provider about 打开生成文件并添加如下两个方法...,我一般把它们放在一个叫vm对象,便于肉眼区分是绑定对象还是普通变量,这样当看到带vm前缀变量赋值时,就会想到要刷新页面视图情况,从而可以做一些相关处理,或避免频繁刷新。.../> segment四 无论text-center还是padding-left等,用都是ionic指令,同样有没有留意到细节:为什么用[hidden

    67750

    AngularDart4.0 指南- 表单 顶

    表单是商业应用程序主流。您可以使用表单登录,提交帮助请求,订单,预订航班,安排会议,并执行无数其他数据录入任务。...hero-form@Component选择器值意味着您可以使用元素将此表单放在父模板中。 templateUrl属性指向模板HTML单独文件(您将很快创建)。...指令exportAs属性告诉Angular如何将引用变量链接到指令。 您将name设置为“ngForm”,因为ngModel指令exportAs属性是“ngForm”。...正如前面所解释,变量heroForm被绑定到整体管理表单NgForm指令。 NgForm指令 Angular自动创建并附加一个NgForm指令给标签。...NgForm指令补充表单元素附加功能。 它包含用ngModel和ngControl指令为元素创建控件,并监视它们属性,包括它们有效性。

    17.5K30

    AngularDart 4.0 高级-生命周期钩子 顶

    组件有一个Angular自己管理生命周期。 Angular创建它,渲染它,创建和渲染它子项,在数据绑定属性发生变化时对其进行检查,并在将它从DOM中删除之前对其进行销毁。...组件生命周期挂钩 指令和组件实例生命周期与Angular创建,更新和摧毁它们一样。...此示例将SpyDirective应用于父SpyComponent管理ngFor英雄迭代器中。...一边开玩笑,注意两点: Angular为指令和组件调用钩子方法。 间谍指令可以提供对不能直接更改DOM对象洞察。 显然,你不能触摸本地div实现。 您也不能修改第三方组件。...在这里它被附加到重复英雄 {{hero}} 每个间谍出生和死亡标志着所附英雄

    6.2K10

    Angular DOM 抽象概述

    ,不能直接实例化抽象类,只能实例化该抽象类子类) 作用 利用 TemplateRef 实例,我们可以灵活地创建内嵌视图。...,可能会在某个标签上同时使用 *ngIf 或 *ngFor 指令,比如: <div class="lesson" *ngIf="lessons" *ngFor="let lesson of lessons...ngIf 指令移动到外部 div 元素上,但为了满足上述需求,我们必须创建额外 div 元素。...,大大减轻了我们工作量,接下来让我们看一 ngTemplateOutlet 指令定义: @Directive({selector: '[ngTemplateOutlet]'}) export class...但创建过程还是有点繁琐,为了提高开发者体验和开发效率,Angular 引入了 ngComponentOutlet 指令。 好,我们马上来体验一 ngComponentOutlet 指令

    3.5K30

    angular知识点梳理第二篇-基本语法

    文章目录 前文回顾 基本语法 常见指令 NgModel NgFor NgIf Ng-container 管道 前文回顾 前面已经写了关于angular项目的基本介绍和如何创建一个angular项目,这一篇主要梳理一些...angular基本语法,这样有利于后面我们进行梳理别的知识点做一些铺垫 基本语法 常见指令 NgModel NgModel就和vue中v-model效果是一致,只是写法会有一些区别,vue中是可以直接进行使用...,但是在angular中我们引入框架一个核心模块FormsModule才可以,该指令就是将数据驱动视图改变!...-- 使用{{}}进行数据获取 --> {{inputData}} 运行效果 NgFor NgFor和我们js中for循环渲染数据是一致,所以这里是比较容易理解,简单演示一...:{{isShow}} 我是一个div块 运行效果 true显示: false不显示: Ng-container ng-container

    2.5K30
    领券