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

Angular 4 *ngFor,ngx-pipes获取顶级键的名称

Angular 4中的*ngFor是一个结构指令,用于在模板中循环遍历一个集合,并为每个元素生成相应的HTML代码。ngx-pipes是一个Angular库,提供了一些常用的管道(pipes),用于对数据进行处理和转换。

*ngFor的语法如下:

代码语言:html
复制
<element *ngFor="let item of collection; let i = index">
  <!-- code to be repeated for each item -->
</element>

其中,collection是要遍历的集合,item是集合中的每个元素,i是元素的索引。

ngx-pipes是一个强大的管道库,可以用于对数据进行过滤、排序、分组等操作。它提供了许多常用的管道,如filter、orderBy、groupBy等。

获取顶级键的名称是指获取一个对象的所有顶级属性(键)的名称。在Angular中,可以使用Object.keys()方法来实现这个功能。Object.keys()方法返回一个包含对象所有顶级属性名称的数组。

以下是一个示例代码,演示了如何使用*ngFor和ngx-pipes来获取一个对象的顶级键的名称:

代码语言:html
复制
<div *ngFor="let key of object | keys">
  {{ key }}
</div>

其中,object是要获取顶级键的对象,keys是ngx-pipes库中的一个管道,用于获取对象的顶级键。

推荐的腾讯云相关产品和产品介绍链接地址:

请注意,以上链接仅供参考,具体的产品选择应根据实际需求进行评估和决策。

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

相关·内容

AngularDart 4.0 高级-结构指令 顶

您可以在分配给ngFor字符串中启用这些功能,这是您在Angularmicrosyntax中编写。...微观语法分析器提取of和trackby,将首字母大写(of -> Of, trackBy -> TrackBy),并在它们前面加上指令属性名称(ngFor),产生名称ngForOf和ngForTrackBy...这些是两个NgFor输入属性名称。 这就是指令如何得知列表是heroes,并且track-by功能是trackById。 当NgFor指令遍历列表时,它会设置并重置其自己上下文对象属性。...Angular设置let-hero为上下文$implicit属性值,NgFor已经用当前迭代hero初始化了它值。 API指南描述了额外NgFor指令属性和上下文属性。...指令类名称以Directive结尾。 Angular自己指令不会。

16K20

Angular 快速学习笔记(1) -- 官方示例要点

Angular 复写器(repeater)指令,使用let xx of xxs遍历 绑定click使用 (click) <li *ngFor="let hero of heroes" (click...组件不应该直接获取或保存数据,它们不应该了解是否在展示假数据。 它们应该聚焦于展示数据,而把数据访问职责委托给某个服务 b. 服务负责业务数据获取和保存,让组件只需要关注展示 c....Angular 最佳实践之一就是在一个独立顶级模块中加载和配置路由器,它专注于路由功能,然后由根模块 AppModule 导入它 b. ng generate module app-routing...*ngFor 不能直接使用 Observable。 不过,它后面还有一个管道字符(|),后面紧跟着一个 async,它表示 Angular AsyncPipe。...快速学习笔记(4) -- Observable与RxJS Angular快速学习笔记(3) -- 组件与模板 Angular快速学习笔记(2) -- 架构 Angular 快速学习笔记(1) -- 官方示例要点

3.6K50

Angular 快速学习笔记(1) -- 官方示例要点

Angular 复写器(repeater)指令,使用let xx of xxs遍历 绑定click使用 (click) <li *ngFor="let hero of heroes" (click...组件不应该直接获取或保存数据,它们不应该了解是否在展示假数据。 它们应该聚焦于展示数据,而把数据访问职责委托给某个服务 b. 服务负责业务数据获取和保存,让组件只需要关注展示 c....Angular 最佳实践之一就是在一个独立顶级模块中加载和配置路由器,它专注于路由功能,然后由根模块 AppModule 导入它 b. ng generate module app-routing...*ngFor 不能直接使用 Observable。 不过,它后面还有一个管道字符(|),后面紧跟着一个 async,它表示 Angular AsyncPipe。...快速学习笔记(4) -- Observable与RxJS Angular快速学习笔记(3) -- 组件与模板 Angular快速学习笔记(2) -- 架构 Angular 快速学习笔记(1) -- 官方示例要点

3.6K00

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

,但Angular首先查看名称是否匹配已知指令事件属性,如下例所示: <!...如果名称未能匹配已知指令元素事件或输出属性,则Angular会报告“未知指令”错误。 $event和事件处理语句 在事件绑定中,Angular为目标事件设置了一个事件处理程序。...对象每个都是一个CSS类名字; 如果应该添加类,则其值为true,如果应该删除则为false。... 要同时设置多个内联样式,NgStyle指令可能是更好选择。 尝试绑定ngStyle到一个key:value控制Map。 对象每个都是一个样式名称;它值是适合那种样式。...分配给* ngFor文本是指导迭代器进程指令。 *ngFor微语法 分配给* ngFor字符串不是模板表达式。 这是一种微语法 - Angular解释一种小语言。

29.9K20

AngularDart4.0 指南- 显示数据 顶

最终用户界面如下所示: ? 现场示例(查看源代码)演示了此页面中描述所有语法和代码片段。 用插值显示组件属性 显示组件属性最简单方法是通过插值来绑定属性名称。...使用插值,可以将属性名称放在视图模板中,并用双花括号括起来:{{myHero}}。 按照设置说明创建名为displays_data新项目。...元素中* ngForAngular“repeater”指令。...Angular使用该变量作为双曲花括号内插上下文。 在这种情况下,ngFor正在显示一个列表,但ngFor可以为任何Iterable对象重复项目。...在实际应用中,大多数绑定是针对更专业化对象。 要将此绑定转换为使用专用对象,请将英雄名称列表转换为Hero对象列表。 为此,你需要一个Hero类。

5.3K10

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

在模板中显示英雄名称  要在无序列表中显示英雄名称,请将所有当前模板替换为以下HTML:lib/app_component.html (heroes template) {{title}} {{hero.name}} 要在模板中使用Angular指令,需要在组件@Component注解指令参数中列出。...而应将样式放在.css文件中,并使用@ComponentstyleUrls参数引用该文件。 按照惯例,组件CSS和Dart文件名称具有相同基础命名前缀(app_component)。...; height: 1.8em; margin-right: .8em; border-radius: 4px 0 0 4px; } 将样式分配给组件时,它们作用域为该特定组件。...当表达式为false时,Angular删除选定类。 ===运算符测试给定对象是否相同。 在模板语法指南中阅读有关[class]绑定更多信息。

3K30

AngularDart4.0 指南- 用户输入 顶

要绑定到DOM事件,请在括号中包围DOM事件名称,并为其分配引用模板语句。...; } 当用户点击按钮时,Angular从ClickMeComponent调用onClickMe()方法。 通过事件对象获取用户输入 DOM事件携带可能对组件有用信息有效载荷。...当用户按下并释放一个时,会发生一个键盘事件,而Angular在$ event变量中提供一个相应DOM事件对象,该代码将该代码作为参数传递给组件onKey()方法。...从模板引用变量获取用户输入 还有另一种获取用户数据方法:Angular 模板引用变量提供了对模板内元素直接访问。 要声明模板引用变量,请在标识符前加一个哈希字符(#)。...减少噪音一种方法是检查每个$ event.keyCode,并且只有当输入是enter时才采取行动。 有一个更简单方法:绑定到Angularkeyup.enter伪事件。

3.4K00

Angular2 之 结构型指令几个概念

Angular 有一个强力模板引擎,它能让你轻松维护元素DOM树结构。 Angular指令可分为三种 组件 属性型指令 结构型指令 组件 组件其实就是一个带模板指令。...弊 如果我们很快再次使用这个组件时候,重建组件代价是非常大。 当ngIf重新变成true时候,angular会重新创建该组件及其子树。angular会重新运行每个组件初始化逻辑。.../core'; /** 选中器[],是匹配页面上指令,可以有多个名称,由于是自己指令,所以没有使用ng开头 */ @Directive({ selector: '[myUnless]' }) export...要么显示包含在Template标签中,要么隐式使用*这种语法糖去包装在Template标签中。它简化了ngIf和ngFor —— 无论是写还是读。...ngFor Angular把*ngFor转换成一个类似的形式: <!

3K20

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

从服务器获取英雄数据。 让用户添加,编辑和删除英雄名字。 将更改保存到服务器。 您将教会应用程序对远程服务器Web API进行相应HTTP调用。...,然后清除输入字段,以便为其他名称做好准备。...添加删除英雄能力 英雄视图中每个英雄都应该有一个删除按钮。 将以下按钮元素添加到英雄组件HTML中,位于重复元素中英雄名称之后。...正如所料,* ngFor从组件英雄属性重复英雄对象。 但正如你很快就会看到,英雄财产现在是一个英雄列表流,而不仅仅是一个英雄名单。...* ngFor只能通过异步管道(AsyncPipe)进行路由才能对Stream执行所有操作。 异步管道subscribes 流并产生* ngFor英雄列表。

11K30

Angular 显示英雄列表

最终,你会从远端数据服务器获取它。但是目前,你需要创建一些模拟英雄(some mock heroes),并假设这些数据是从远程服务器上获取。...="let hero of heroes"> *ngFor 是一个 Angular 复写器(repeater)指令。...它会为列表中每项数据复写它宿主元素。 在这个例子中  就是 *ngFor 宿主元素 heroes 就是来自 HeroesComponent 类列表。...当依次遍历这个列表时,hero 会为每个迭代保存当前英雄对象。 不要忘了 ngFor 前面的星号(*),它是该语法中关键部分。 浏览器刷新之后,英雄列表出现了。...Angular 会把所点击  上 hero 对象传给它,这个 hero 也就是前面在 *ngFor 表达式中定义那个。

4.4K70

Angular 显示英雄列表

最终,你会从远端数据服务器获取它。但是目前,你需要创建一些模拟英雄(some mock heroes),并假设这些数据是从远程服务器上获取。...="let hero of heroes"> *ngFor 是一个 Angular 复写器(repeater)指令。...它会为列表中每项数据复写它宿主元素。 在这个例子中  就是 *ngFor 宿主元素 heroes 就是来自 HeroesComponent 类列表。...当依次遍历这个列表时,hero 会为每个迭代保存当前英雄对象。 不要忘了 ngFor 前面的星号(*),它是该语法中关键部分。 浏览器刷新之后,英雄列表出现了。...Angular 会把所点击  上 hero 对象传给它,这个 hero 也就是前面在 *ngFor 表达式中定义那个。

4K30

AngularDart4.0 指南- 表单 顶

顺便说一句,您可以注入数据服务来获取和保存真实数据,或者将这些属性作为输入和输出(请参阅“模板语法”页面中输入和输出属性)来绑定到父组件。 这不是现在问题,这些未来变化不会影响表单。...您将在表单中添加一个select,并使用ngFor(先前在“显示数据”页面中看到一种技术)将选项绑定到powers列表。...名称输入是必需,清除它将框轮廓变为红色。 这说明有些事情是错,但用户不知道什么是错,或者该怎么做。 利用控件状态来显示有用消息。...使用有效和原始状态 当用户删除名称时,表单应该如下所示: ?...您可以通过根据名称控制状态设置隐藏属性来控制错误消息可见性。

17.4K30
领券