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

从*ngFor外部*ngFor

*ngFor是Angular框架中的一个指令,用于在模板中循环渲染列表数据。它可以用于在HTML模板中迭代数组、对象或集合,并为每个元素生成相应的HTML代码。

ngFor指令有两种形式:外部ngFor和内部ngFor。外部ngFor是指在一个ngFor循环内部嵌套另一个ngFor循环的情况。

外部ngFor的作用是在外层循环的每次迭代中,为内层循环提供一个新的上下文。这样可以实现多层嵌套的数据展示和处理。在外部ngFor中,我们可以使用当前迭代的外层上下文来访问内层循环的数据。

外部*ngFor的语法如下:

代码语言:txt
复制
<ng-container *ngFor="let outerItem of outerArray">
  <!-- 外层循环的HTML代码 -->
  <ng-container *ngFor="let innerItem of outerItem.innerArray">
    <!-- 内层循环的HTML代码 -->
  </ng-container>
</ng-container>

在上述代码中,outerArray是外层循环的数据源,outerItem是当前迭代的外层上下文。innerArray是内层循环的数据源,innerItem是当前迭代的内层上下文。

外部*ngFor的应用场景包括但不限于以下情况:

  1. 多级分类展示:例如,一个商品分类树状结构,每个分类下又包含多个子分类。
  2. 嵌套评论列表:例如,一个帖子下的评论列表,每个评论下又可以有多个回复。
  3. 多层级导航菜单:例如,一个网站的多级导航菜单,每个菜单项下又可以有多个子菜单项。

对于外部*ngFor的应用,腾讯云提供了一些相关产品和服务,可以帮助开发者构建和管理云计算应用:

  1. 腾讯云服务器(CVM):提供弹性计算能力,可用于部署和运行应用程序。
  2. 腾讯云数据库(TencentDB):提供多种数据库类型,包括关系型数据库和NoSQL数据库,用于存储和管理数据。
  3. 腾讯云云函数(SCF):无服务器计算服务,可用于编写和运行无需管理服务器的代码。
  4. 腾讯云容器服务(TKE):提供容器化应用的部署和管理能力,可用于构建和运行容器化的应用程序。

以上是关于从ngFor外部ngFor的完善且全面的答案,希望对您有帮助。

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

相关·内容

  • AngularDart 4.0 高级-结构指令 顶

    当条件为false时,NgIfDOM中删除它的宿主元素,将它从DOM事件(它所依附的)中分离出来,将组件Angular变化检测中分离出来并销毁它。 组件和DOM节点可以被垃圾收集并释放内存。...积极的方面来说,再次显示元素很快。 该组件的以前的状态被保存并准备显示。 该组件不会重新初始化 - 这种操作可能很昂贵。 所以隐藏和展示有时候是正确的。...NgFor和NgSwitch ...指令遵循相同的模式。 *ngFor内部详解 Angular以类似的方式将*ngFor转换为星号(*)语法通过模板属性到模板元素。...TemplateRef和ViewContainerRef 像这样一个简单的结构指令Angular生成的中创建一个嵌入式视图,并将该视图插入与指令的原始宿主元素相邻的视图容器中...如果条件为假并且视图尚未创建,请告诉视图容器模板创建嵌入的视图。 如果条件为真并且当前显示视图,则清除且销毁视图的容器。 没有人读取myUnless属性,因此它不需要getter。

    16.1K20

    Angular 显示英雄列表

    最终,你会远端的数据服务器获取它。但是目前,你需要创建一些模拟英雄(some mock heroes),并假设这些数据是远程服务器上获取的。...不要忘了 ngFor 前面的星号(*),它是该语法中的关键部分。 浏览器刷新之后,英雄列表出现了。...给英雄们应用样式表 英雄列表应该富有吸引力,并且当用户把鼠标移到某个英雄上和列表中选中某个英雄时,应该给出视觉反馈。...现在,列表中随便点击一个条目。 应用又正常了。 英雄们显示在列表中,并且所点英雄的详情也显示在了页面的下方。...给所选英雄添加样式 所有的  元素看起来都是一样的,因此很难列表中识别出所选英雄。

    4.4K70

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

    Class绑定 您可以使用Class绑定元素的类属性添加和删除CSS类名称。 Class绑定语法类似于属性(property)绑定。...他们列表中选择项目。 他们点击按钮。 这样的用户操作可能导致数据流向相反的方向:元素到组件。 了解用户操作的唯一方法是侦听某些事件,例如按键,鼠标移动,点击和触摸。...本节介绍常见的结构指令: NgIf:有条件地DOM中添加或删除元素。 NgFor:为列表中的每个项目重复一个模板。 NgSwitch:只显示多个可能元素中的一个。...分配给* ngFor的文本是指导迭代器进程的指令。 *ngFor微语法 分配给* ngFor的字符串不是模板表达式。 这是一种微语法 - Angular解释的一种小语言。...它可以根据切换条件几个可能的元素中显示一个元素。 Angular只把选中的元素放入DOM中。

    29.9K20

    Angular 显示英雄列表

    最终,你会远端的数据服务器获取它。但是目前,你需要创建一些模拟英雄(some mock heroes),并假设这些数据是远程服务器上获取的。...不要忘了 ngFor 前面的星号(*),它是该语法中的关键部分。 浏览器刷新之后,英雄列表出现了。...给英雄们应用样式表 英雄列表应该富有吸引力,并且当用户把鼠标移到某个英雄上和列表中选中某个英雄时,应该给出视觉反馈。...现在,列表中随便点击一个条目。 应用又正常了。 英雄们显示在列表中,并且所点英雄的详情也显示在了页面的下方。...为什么这样是正常的 当 selectedHero 为 undefined 时,ngIf  DOM 中移除了英雄详情。因此也就不用担心 selectedHero 的绑定了。

    4K30
    领券