开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

我是否应该将ngFor嵌套在ngFor中以获得动态菜单/类别？

ngFor是Angular框架中的一个指令，用于在模板中循环渲染列表数据。将ngFor嵌套在*ngFor中可以实现动态菜单/类别的效果，即在一个循环中嵌套另一个循环。

优势：

动态菜单/类别：通过嵌套*ngFor，可以根据数据的层级关系动态生成菜单或类别的结构，实现多级嵌套的效果。
灵活性：嵌套*ngFor可以根据数据的层级关系自由控制菜单或类别的展示方式，满足不同的需求。

应用场景：

商品分类：在电商网站中，可以使用嵌套*ngFor来展示商品的分类结构，实现多级分类的效果。
导航菜单：在网站或应用的导航栏中，可以使用嵌套*ngFor来展示多级菜单，提供更好的用户体验。

推荐的腾讯云相关产品：腾讯云提供了丰富的云计算产品，以下是一些与前端开发相关的产品：

腾讯云云服务器（CVM）：提供可扩展的云服务器实例，用于部署和运行前端应用。产品介绍链接：https://cloud.tencent.com/product/cvm
腾讯云对象存储（COS）：提供安全、稳定、低成本的对象存储服务，用于存储前端应用的静态资源。产品介绍链接：https://cloud.tencent.com/product/cos
腾讯云内容分发网络（CDN）：加速静态资源的传输，提高前端应用的加载速度和用户体验。产品介绍链接：https://cloud.tencent.com/product/cdn

请注意，以上推荐的腾讯云产品仅供参考，具体选择应根据实际需求进行。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

AngularDart 4.0 高级-结构指令顶

它从DOM中物理添加和删除它们。使用浏览器开发人员工具确认事实，以检查DOM。 ? 顶部段落在DOM中。底部，废弃的段落不是; 取而代之的是关于“模板绑定”的评论（稍后更多）。...*ngFor内部详解 Angular以类似的方式将*ngFor转换为从星号（*）语法通过模板属性到模板元素。...NgIf或NgFor应该先走哪一个？ NgIf能否取消NgFor的效果？如果是这样（并且看起来应该如此），Angular应该如何概括取消其他结构指令的能力？这些问题没有简单的答案。...兄弟元素组根元素通常能且应该成为结构指令的宿主，列表元素()是NgFor迭代的典型宿主元素。...在这个例子中，前缀是my。指令类名称以Directive结尾。 Angular自己的指令不会。

16.1K2 0

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

在Angular中你不需要这些指令。通常，您可以使用功能更强大，表现力更强的Angular绑定系统获得相同的结果。当你可以写一个简单的绑定时为什么要创建一个指令来处理点击呢？...NgFor NgFor是一个迭代指令 - 一种呈现项目列表的方式。您可以定义一个HTML块来定义应该如何显示单个项目。您告诉Angular将该块用作呈现列表中每个项目的模板。...ngFor指令迭代由父组件的heroes属性返回的heroes，并在每次迭代期间将hero设置为列表中的当前项目。要访问hero的属性，请参考ngFor宿主元素（或其后代内）中的hero输入变量。...绑定的目标是绑定标点符号中的属性或事件:[],()或[()]。源是在引号（“”）内或插值（{{}}）内。 source指令的每个成员都可以自动获得绑定。...如果它永远不能为空，但它是空的，这是一个应该被捕获和修复的编程错误。抛出异常是正确的。另一方面，属性路径中空值时不时出现可能还好，特别是当数据现在为空，将来将返回数据。

30K2 0

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

在此页面中，您将扩展“Tour of Heroes”应用程序，以显示英雄列表，并允许用户选择英雄并显示英雄的详细信息。完成此页面后，该应用应该看起来像这个实例（查看源代码）。...-- each hero goes here --> 下一步你将添加英雄名字使用ngFor指令罗列英雄目标是将组件中的英雄列表绑定到模板，迭代它们，并单独显示它们。...ngFor指令遍历组件的英雄列表并为该列表中的每个英雄呈现该模板的一个实例。表达式部分将hero标识为模板输入变量，其中包含每个迭代的英雄详情。...===运算符测试给定的对象是否相同。在模板语法指南中阅读有关[class]绑定的更多信息。 ...您了解了如何在组件模板中使用核心指令ngIf和ngFor。您在CSS文件中定义了样式，并使用它们来设置应用程序的样式。你的应用应该看起来像这个实例（查看源代码）。

3K3 0

Angular 6.x 指令快速入门

绑定的上下文应该是一个对象，此外可通过 let语法来声明绑定上下文对象属性名。...}; } 第七节 - 使用 ngComponentOutlet 指令 ngComponentOutlet 的作用该指令用于使用声明式的语法，动态加载组件。...我们以 ngFor 指令为例： ngFor="let item of items; index as i; trackBy: trackByFn">...... 经过微语法解析器解析后，将生成以下模板： ngFor let-item [ngForOf]="items" let-i="index" [ngForTrackBy]...Angular 将 let-item 设置为此上下文 $implicit 属性的值。了解上述的语法，我们就可以灵活地定义属性自己的结构指令。

3.2K4 0

Angular 6.x 快速入门

基础知识 ngIf 指令简介该指令用于根据表达式的值，动态控制模板内容的显示与隐藏。它与 AngularJS 1.x 中的 ng-if 指令的功能是等价的。... ngFor 指令简介该指令用于基于可迭代对象中的每一项创建相应的模板。它与 AngularJS 1.x 中的 ng-repeat 指令的功能是等价的。...市我的技能 ngFor="let...组件，开发一个功能，即可以让用户动态控制技能信息的显示与隐藏。...反之，我们的路径将在 URL 地址栏中显示，随后进行后续视图更新，以匹配 routerLink 中设置的值。

14.1K2 0

Angular 项目实现权限控制

这是我参与「掘金日新计划 · 4 月更文挑战」的第9天。上一篇文章我们讲到了 Angular 组件通信。本文我们讲讲，在项目开发中，你是否会遇到这样的需求：请根据用户登陆，限制其访问的内容。...返回的数据格式需要我们按照自己在 app-routing.module.ts 中编写好的路由路径对应。...-- demo.component.html --> ngFor...，拥有下面几个字段： title 字段 - 菜单的标题 url 字段 - 菜单的路由，对应 app-routing.module.ts 中的完整的 path icon 字段 - 标题前的小图标，二级标题没有...is_open 字段 - 菜单是否展开的标识此时，后端的菜单接口，应该返回类似下面的数据： // demo.component.ts public menu_data:any = [ {

8152 0

Angular 6.x 基础教程

第四节 - 事件进阶获取鼠标事件在第三节的示例中，假如我们需要获取鼠标事件，那应该怎么办呢？...指令在 Angular 中我们可以使用 ngFor 指令来显示数组中每一项的信息。...第八节 - 使用双向绑定使用过 AngularJS 1.x 的同学，应该很熟悉 ng-model 指令，通过该指令我们可以方便地实现数据的双向绑定。...第九节 - 使用 Output 装饰器 Output 装饰器的作用是用来实现子组件将信息，通过事件的形式通知到父级组件。...用过 AngularJS 1.x 的同学，对 ng-class 应该很熟悉，通过它我们能够根据条件，为元素动态的添加或移除对应的样式。在 Angular 中，对应的指令是 ngClass 。

15.6K2 0

Angular: 最佳实践

如果你还没读过官网指引，我建议你在阅读本文之前读一下。因为官网涵盖了本文很多没介绍的东西。本文将分为几个章节来讲解，这些章节根据应用核心需求和生命周期来拆分。现在，我们开始吧！...我们应该为我们数据添加类型限定，下面有些有用的知识点：使用类型联合和交集。官网解释了如何使用 TS 编译器组合类型以轻松工作。这在处理来自 RESTful API 数据的时非常有用。...将简单的 HTTP 服务逻辑放在基类中，并从中派生 API 服务。...请注意，这里我用了比原始更难的词语，而不是复杂这个词。这是因为除了检查直接的条件语句之外，任何逻辑都应该写在组件的类方法中，而不是写在模版中。...在模版中写 *ngIf=”someVariable === 1” 是可以的，其他很长的判断条件就不应该出现在模版中。

2.9K4 0

AngularDart4.0 指南-体系结构概述顶

双向数据绑定是一个重要的第四种形式，它使用ngModel指令将属性和事件绑定在一个符号中。...它们倾向于以属性的形式出现在元素标签内，有时候以名称的形式出现，但更常见的是作为赋值或绑定的目标。结构指令通过添加，删除和替换DOM中的元素来改变布局。...服务是一个广泛的类别，包含您的应用程序所需的任何值，功能或特征。几乎任何东西都可以成为服务。服务通常是一个狭义的，明确的目的。它应该做一些具体的事情，并做好。...组件类应该是精益的。他们不从服务器获取数据，验证用户输入或直接登录到控制台。他们将这些任务委托给服务。一个组件的工作是启用用户体验，仅此而已。...如果请求的服务实例不在容器中，那么在将服务返回给Angular之前，注入器将创建一个并将其添加到容器中。当所有请求的服务已经解析并返回时，Angular可以用这些服务作为参数调用组件的构造函数。

7.9K3 0

AngularDart4.0 指南- 表单顶

使用* ngFor添加powers 英雄必须从一个固定的机构批准的权力列表中选择一个超级大国。您在内部维护该列表（在HeroFormComponent中）。...您将在表单中添加一个select，并使用ngFor（先前在“显示数据”页面中看到的一种技术）将选项绑定到powers列表。...靠近表单顶部的诊断确认所有的更改都反映在model中。从模板中删除诊断绑定，因为它已经达到了目的。根据控制状态给出视觉反馈使用CSS和类绑定，您可以更改表单控件的外观以反映其状态。...跟踪控制状态 Angular表单控件可以告诉您用户是否触摸了该控件，值是否改变，或者该值是否失效。...在多处的按钮中引用该变量。显示Model（可选）提交表单目前没有视觉效果。如预期的演示。增加代码过后的demo不会教你任何关于表单的新东西。但是这是一个锻炼一些新获得的绑定技巧的机会。

17.5K3 0

AngularDart4.0 英雄之旅-教程-08HTTP 顶

URL中的英雄id标识服务器应该更新哪个英雄。另外，响应中的数据是单个英雄对象而不是列表。...，然后将新的英雄添加到列表中。...添加删除英雄的能力英雄视图中的每个英雄都应该有一个删除按钮。将以下按钮元素添加到英雄组件HTML中，位于重复的元素中的英雄名称之后。...这个简单的例子将错误输出到控制台。一个真实的应用程序应该做的更好。将搜索组件添加到仪表板将英雄搜索HTML元素添加到DashboardComponent模板的底部。...您更新了组件以允许添加，编辑和删除英雄。您配置了内存中的Web API。您了解了如何使用Streams。

11K3 0

angular使用NG ZORRO来构建博客展示项目(简单实现展示页面)

使用 NG ZORRO 在上一篇文章中，我们已经安装了NG ZORRO，并在跟模块中引入了，在子模块中使用还需要再次引入。...展开二级菜单的时候报错了在app.module.ts中引用 import { BrowserAnimationsModule } from '@angular/platform-browser/...ApiBaseService { constructor(protected http: HttpClient) { } private _loading = false; /** 是否正在加载中...disable-next-line:forin for (const key in params) { let _data = params[key]; // 将时间转化为...动态路由是如何传值的页面样式和布局如何优化

1.6K3 0

Angular Material 的设计之美

在各种各样没有 bug 的用例中按预期行事。通过单元测试和集成测试更好地测试行为。可在 Material Design 规范的范围内进行定制。将性能开销降至最低。...我最开始认为将所有样式全部写到 mixin 中并不是很优雅的做法，但是在编写 ng-matero 暗黑主题的时候，我发现不这样做是不行的。以下是 Angular Material 主题定制的方法。...以表单组件为例，以下是一个滑块组件。...菜单 Angular Material 的菜单组件可以说非常强大，除了官网提到的功能之外，我们还可以用以下方式实现动态数据加载的多级菜单，比如 ng-matero 的 Top Menu 布局。...表格 Angular Material 的表格是我见过最特殊的表格，结构简洁，通过定义动态列渲染数据，以下是一个官网例子： <table mat-table [dataSource]="dataSource

5K3 0

在前端中理解MVC服务之 Angular篇(完结)

角度允许我们忘记DOM，所以，让user.view.ts文件从我们的应用中消失。最后，在最后一篇文章中，我们将转换代码以将其与 Angular 框架集成。第 1 部分。...View 模型的直观表示，即用户所看到的部分 Controller - Model与View中的链接下图是我们的项目结构该文件将充当一个画布，使用元素动态构建整个应用程序。...模型将具有以下字段： id 唯一值 name 用户名 age 用户年龄 complete bool值，可以知道此条数据是否有用用户的Class已经被写在TS中。..._commit(this.users); } } Views 这个部分与前两篇文章相比，是变化最大的一部分，在这种情况之下，我们不需要使用DOM，因为Angular将执行动态操作 DOM 的艰巨任务...我建议你从第一篇与JavaScript相关的帖子开始，了解所使用的体系结构。下一步是通过应用 TypeScript（在第二篇文章中）来强化代码，最后查看此文章中的代码已适应框架。

4.1K2 0

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

在下面的章节中，您将学习如何通过数据绑定来动态获取和设置DOM（文档对象模型）值。从数据绑定插值的第一种形式开始，看看有多少更丰富的模板HTML可以使用。请回到顶部。插值（{{...}}）...该组件具有hero属性，而* ngFor定义了英雄模板变量。 {{hero.name}}中的英雄是指变量输入变量，而不是组件的属性。...属性名称或方法调用应该是标准。偶尔的布尔否定（!）可以。另外，将应用和业务逻辑放到到组件本身，在那里它将更容易开发和测试。...最后一个类别含义模糊的,除非你知道这个一般规则：属性(Attributes)初始化DOM属性(Properties)，然后完工。...记住这个模型，继续阅读以了解绑定目标。绑定目标数据绑定的目标是DOM中的东西。

5.2K1 0

AngularDart 4.0 高级-管道顶

使用管道管道将数据作为输入并将其转换为所需的输出。在此页面中，您将使用管道将组件的生日属性转换为人性化的日期。...功率提升计算器更新模板以测试自定义管道并不是很有趣。将示例升级到“Power Boost Calculator”，它使用ngModel将您的管道和双向数据绑定相结合。...飞行英雄管道将一个FlyingHeroesPipe添加到*ngFor迭代器，该迭代器将英雄列表过滤到只能飞行的英雄。...这样的应用程序中的组件通常无法了解这些更改。此外，篡改组件设计以适应管道是不明智的。努力保持组件类独立于HTML。组件应该不知道管道。为了过滤飞行英雄，请考虑一个不纯的管道。...]; } 异步管道将样板文件保存在组件代码中。该组件不必订阅异步数据源，提取已解析的值并将其公开以进行绑定，并且必须在其销毁时取消订阅（内存泄漏的有效来源）。

6.4K2 0

AngularDart4.0 英雄之旅-教程-07路由顶

AppComponent只应该处理导航，所以你可以将Heroes的显示从AppComponent移出并放到它自己的HeroesComponent中。...从导入路径中删除src /前缀。将AppComponent类重命名为HeroesComponent（仅在本地重命名，仅在此文件中）。将选择器my-app重命名为my-heroes。...>元素（或者一个动态设置这个元素的脚本）。...在这个仪表板中你指定了四个英雄（第二，第三，第四和第五）。刷新浏览器以查看新仪表板中的四个英雄名称。...选择一个仪表板英雄当用户选择仪表板中的英雄时，应用程序应该导航到HeroDetailComponent以允许用户查看和编辑选择的英雄。

17.6K3 0

angular入门教程_初学者织围巾简单教程慢动作

课程介绍本课程是一个系列基础教程，目标是带领读者上手实战，课程以新版本 Angular 的 3 个核心概念作为主线：组件、路由、模块，加上业务开发过程中必须用到的特性：工具、指令、表单、RxJS、...VDom、JSX；当别人提到 jQuery 的时候，你首先想到的应该是$对吧？.../li> 很明显，浏览器不认识 *ngFor 和 { {…}} 这种语法，所以必须在浏览器里面进行“编译”，获得对应的模板函数，然后再把数据传递给模板函数，最终结合起来获得一堆 HTML 标签...那么需要在同一个 HTML 上使用多个结构型指令应该怎么办呢？...如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至举报，一经查实，本站将立刻删除。

3.3K2 0

Angular快速学习笔记（2） -- 架构

指令告诉 Angular 在一个列表上进行迭代 {{hero.name}}、(click) 和 [hero]把程序数据绑定到及绑定回 DOM，以响应用户的输入。...format: output '9:43 AM'--> The time is {{today | date:'shortTime'}} 1.2.3.2 指令 Angular 的模板是动态的...该装饰器提供的元数据可以让你的服务作为依赖被注入到客户组件中。服务是一个广义的概念，它包括应用所需的任何值、函数或特性。狭义的服务是一个明确定义了用途的类。它应该做一些具体的事，并做好。...Angular 把组件和服务区分开，以提高模块性和复用性，这比较契合后端的开发思想，一个类只需要把自己负责的事情做好即可，专业的事情交给专业的类去处理。...通常在构造函数，注入依赖的service： constructor(private service: HeroService) { } 当 Angular 发现某个组件依赖某个服务时，它会首先检查是否该注入器中已经有了那个服务的任何现有实例

5.3K2 0

Angular 从入坑到挖坑 - Router 路由使用入门指北

四、Step by Step 4.1、基础概念 4.1.1、base url 在 Angular 应用中，框架会自动将 index.html 文件中的 base url 配置作为组件、模板和模块文件的基础路径地址...对于参数对象中的属性（key）对应的属性值（value），我们可以绑定一个组件中的属性进行动态的赋值，也可以通过添加单引号将参数值作为一个固定的数值，例如在下面代码中的两个查询参数就是固定的值动态路由传递与使用查询参数不同，使用动态路由进行参数传值时，需要我们在定义路由时就提供参数的占位符信息，例如在下面定义路由的代码里，对于组件所需的参数 newsId，我们需要在定义路由时就指明...例如这里的 item.newsId 变量就是我们需要传递的参数值 ngFor="let item of newsList; let i = index"> <a [routerLink...4.3、嵌套路由在一些情况下，路由是存在嵌套关系的，例如下面这个页面，只有当我们点击资源这个顶部的菜单后，它才会显示出左侧的这些菜单，也就是说这个页面左侧的菜单的父级菜单是顶部的资源菜单 ?

4.2K5 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭