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

Angular:如何对具有动态名称的数组使用*ngFor?

在Angular中,可以使用*ngFor指令对具有动态名称的数组进行循环遍历。

首先,确保你的动态数组已经在组件中定义并初始化。例如,假设你有一个名为dynamicArray的数组,它的名称是动态的,你可以在组件中声明和初始化它:

代码语言:txt
复制
dynamicArray: any[] = [];

接下来,在你的HTML模板中,使用*ngFor指令来循环遍历这个动态数组。你可以使用方括号语法来指定数组的名称,如下所示:

代码语言:txt
复制
<div *ngFor="let item of dynamicArray">
  {{ item }}
</div>

在这个例子中,*ngFor指令将遍历dynamicArray数组,并为数组中的每个元素创建一个div元素。在div元素中,我们使用双花括号语法来显示数组元素的值。

如果你的动态数组是一个对象数组,并且你想访问对象的属性,你可以使用点语法来访问属性。例如,假设你的动态数组包含了一些具有name属性的对象,你可以这样访问name属性:

代码语言:txt
复制
<div *ngFor="let item of dynamicArray">
  {{ item.name }}
</div>

这样,*ngFor指令将遍历dynamicArray数组,并为数组中的每个对象创建一个div元素。在div元素中,我们使用item.name来显示对象的name属性。

需要注意的是,ngFor指令会自动更新DOM,以反映动态数组的变化。如果你在运行时修改了dynamicArray数组,ngFor指令会自动更新DOM,以显示新的数组内容。

关于Angular的更多信息和示例,请参考腾讯云的Angular产品文档:Angular产品介绍

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

相关·内容

Angular 6.x 基础教程

ngFor 指令 在 Angular 中我们可以使用 ngFor 指令来显示数组中每一项信息。...; 语法迭代数组每一项,另外我们使用 index as i 用来访问数组中每一项索引值。...需要注意是,当 SimpleFormComponent 组件类属性名称不是 message 时,我们需要告诉 Angular 如何进行属性值绑定,具体如下: export class SimpleFormComponent...用过 AngularJS 1.x 同学, ng-class 应该很熟悉,通过它我们能够根据条件,为元素动态添加或移除对应样式。在 Angular 中,对应指令是 ngClass 。...使用 ngClass 指令 ngClass 指令接收一个对象字面量,对象 key 是 CSS class 名称,value 值是 truthy/falsy 值,表示是否应用该样式。

15.6K20

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

NgStyle 您可以根据组件状态动态设置内联样式。 使用NgStyle,您可以同时设置多个内联样式。 样式绑定是设置单个样式值简单方法。...当指令没有合适宿主元素时如何元素进行分组。 如何编写自己结构指令。 为什么你只能应用一个结构指令到一个元素。 本节介绍常见结构指令: NgIf:有条件地从DOM中添加或删除元素。...例如,TypeScript Angular程序通常具有诸如* ngIf =“currentHero”代码,其中Dart程序具有诸如* ngIf =“currentHero!...*ngFor和trackBy NgFor指令可能表现不佳,特别是在大型列表中。 一个项目,删除项目或添加项目的小改动可以触发DOM操作级联。... 模板引用变量(#var) 模板引用变量通常是模板内DOM元素引用。 它也可以是Angular组件或指令或Web组件引用。 使用hash符号(#)来声明一个引用变量。

29.9K20

AngularDart 4.0 高级-结构指令 顶

Angular拥有强大模板引擎,可以让我们轻松操纵元素DOM结构。 本指南介绍Angular如何用结构指令操纵DOM,以及如何编写自己结构指令来完成相同操作。 尝试一下实例(查看源代码)。...NgFor指令具有比本指南中显示NgIf更多功能,包括必需和可选。 至少NgFor需要一个循环变量(let hero)和一个列表(heroes)。...这些是两个NgFor输入属性名称。 这就是指令如何得知列表是heroes,并且track-by功能是trackById。 当NgFor指令遍历列表时,它会设置并重置其自己上下文对象属性。...指令属性名称使用lowerCamelCase拼写,并以前缀开头。 不要使用ng。 该前缀属于Angular。 选择适合您或您公司简短内容。 在这个例子中,前缀是my。...在没有合适宿主元素时使用作为分组元素。 Angular将星号(*)语法解析为。 NgIf,NgFor和NgSwitch内置指令如何工作。

16K20

AngularDart4.0 指南- 显示数据 顶

使用插值,可以将属性名称放在视图模板中,并用双花括号括起来:{{myHero}}。 按照设置说明创建名为displays_data新项目。...当这些属性改变时,Angular会更新显示。 更准确地说,重新显示是在与视图相关某种异步事件之后发生,例如按键,计时器完成或HTTP请求响应。...在任一种样式中,模板数据绑定都具有组件属性相同访问权限。 用* ngFor显示一个列表属性 要显示英雄列表,首先向组件添加英雄名字列表,并将myHero重新定义为列表中第一个名字。...Angular使用该变量作为双曲花括号内插上下文。 在这种情况下,ngFor正在显示一个列表,但ngFor可以为任何Iterable对象重复项目。...回到app_component.dart并删除或注释掉英雄列表中一个元素。 浏览器应该自动刷新,消息应该消失。 概要 现在你知道如何使用: 用双花括号插入来显示组件属性。 ngFor显示项目列表。

5.3K10

Angular 2 数据显示

本章节我们将为大家介绍如何将数据显示到用户界面上,可以使用以下三种方式: 通过插值表达式显示组件属性 通过 NgFor 显示数组型属性 通过 NgIf 实现按条件显示 ---- 通过插值表达式显示组件属性...要显示组件属性,插值是最简单方式,格式为:{{属性名}}。...以下代码基于 Angular 2 TypeScript 环境配置 来创建,你可以在该章节上下载源码,并修改以下提到几个文件。...{ title = '站点列表'; mySite = '菜鸟教程'; } Angular 会自动从组件中提取 title 和 mySite 属性值,并显示在浏览器中,显示信息如下: 使用 ngFor...显示数组属性 我们也可以循环输出多个站点,修改以下文件: app/app.component.ts 文件: import { Component } from '@angular/core'; @Component

2.4K20

Angular 6.x 快速入门

name = 'Angular'; } 定义数据接口 在 TypeScript 中接口是一个非常灵活概念,除了可用于一部分行为进行抽象外,也可用于「对象形状(Shape)」进行描述...基础知识 ngIf 指令简介 该指令用于根据表达式值,动态控制模板内容显示与隐藏。它与 AngularJS 1.x 中 ng-if 指令功能是等价。...组件,开发一个功能,即可以让用户动态控制技能信息显示与隐藏。...1.x 中表单 ) Reactive Forms - 响应式表单 本小节主要介绍模板驱动式表单,接下来我们来演示如何通过表单来为我们之前创建 UserComponent 组件,增加让用户自定义技能功能...router-outlet 指令 该指令用于告诉 Angular 在哪里加载组件,当 Angular 路由匹配到响应路径,并成功找到需要加载组件时,它将动态创建对应组件,并将其作为兄弟元素,插入到

14.1K20

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

如果你学习 结构指令 感兴趣,那么现在我们就来接着阅读,并了解它们是什么,它们有什么用以及如何在项目中使用它们。 你将学到什么 在本文中,你将学到关于 Angular 结构指令模式知识点。...你会知道它们是什么并且怎么去使用它们。 学完本文,你将更好理解这些指令并在实际项目中使用它们。 Angular 结构指令是什么? Angular 结构指令是能够更改 DOM 结构指令。...*ngIf - 根据表达式返回布尔值,有条件地包含一个模版(即条件渲染模版) *ngFor - 遍历数组 *ngSwitch - 渲染每个匹配是图 下面是一个结构化指令例子。...*ngFor 指令 我们使用 *ngFor 指令来遍历数组。...总结 结构指令是 Angular 中很重要一部分,我们可以通过多种方式使用它们。 希望通过本文,读者能更好理解怎么去使用这些指令和什么时候去使用这些模式。 本文为译文,采用意译形式。

3.8K20

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

Angular 复写器(repeater)指令,使用let xx of xxs遍历 绑定click使用 (click) <li *ngFor="let hero of heroes" (click...异步处理可以使用回调函数,可以返回 Promise(承诺),也可以返回 Observable(可观察对象) b. angular使用了Rxjs,因此使用Observable,Observable 是...使用http,需要在AppModule中, @angular/common/http 中导入 HttpClientModule 符号,并把它加入 @NgModule.imports 数组 c....*ngFor 不能直接使用 Observable。 不过,它后面还有一个管道字符(|),后面紧跟着一个 async,它表示 Angular AsyncPipe。...---- 作者:Jadepeng 出处:jqpeng技术记事本--http://www.cnblogs.com/xiaoqi 您支持是博主最大鼓励,感谢您认真阅读。

3.6K00

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

Angular 复写器(repeater)指令,使用let xx of xxs遍历 绑定click使用 (click) <li *ngFor="let hero of heroes" (click...异步处理可以使用回调函数,可以返回 Promise(承诺),也可以返回 Observable(可观察对象) b. angular使用了Rxjs,因此使用Observable,Observable 是...使用http,需要在AppModule中, @angular/common/http 中导入 HttpClientModule 符号,并把它加入 @NgModule.imports 数组 c....*ngFor 不能直接使用 Observable。 不过,它后面还有一个管道字符(|),后面紧跟着一个 async,它表示 Angular AsyncPipe。...---- 作者:Jadepeng 出处:jqpeng技术记事本--http://www.cnblogs.com/xiaoqi 您支持是博主最大鼓励,感谢您认真阅读。

3.6K50

Angular 显示英雄列表

在 src/app/ 文件夹中创建一个名叫 mock-heroes.ts 文件。 定义一个包含十个英雄常量数组 HEROES,并导出它。 该文件是这样。...="let hero of heroes"> *ngFor 是一个 Angular 复写器(repeater)指令。...这种方式让你在其它地方复用该组件更加容易,并且即使全局样式和这里不一样,组件也仍然具有期望外观。...Angular 会把所点击  上 hero 对象传给它,这个 hero 也就是前面在 *ngFor 表达式中定义那个。...用户可以选择一个英雄,并查看该英雄详情。 你使用 *ngFor 显示了一个列表。 你使用 *ngIf 来根据条件包含或排除了一段 HTML。 你可以用 class 绑定来切换 CSS 样式类。

4.4K70

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

介绍 本文是该系列中第三篇,旨在了解 MVC 体系结构如何创建前端应用程序。目的是了解如何构建前端应用程序。...View 模型直观表示,即用户所看到部分 Controller - Model与View中链接 下图是我们项目结构 该文件将充当一个画布,使用 元素动态构建整个应用程序。...在此特定情况下,我们将使用数组来存储所有用户,并生成与读取、修改、创建和删除 (CRUD) 用户关联四种方法。..._commit(this.users); } } Views 这个部分与前两篇文章相比,是变化最大一部分,在这种情况之下,我们不需要使用DOM,因为Angular将执行动态操作 DOM 艰巨任务...需要强调是,这篇文章要点是,让你了解不同文件中具有不同功能项目结构,以及View如何完全独立于Model/Service和Controller。

4.1K20

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

文章目录 前文回顾 基本语法 常见指令 NgModel NgFor NgIf Ng-container 管道 前文回顾 前面已经写了关于angular项目的基本介绍和如何创建一个angular项目,这一篇主要梳理一些...angular基本语法,这样有利于后面我们进行梳理别的知识点做一些铺垫 基本语法 常见指令 NgModel NgModel就和vue中v-model效果是一致,只是写法会有一些区别,vue中是可以直接进行使用...-- 使用{{}}进行数据获取 --> {{inputData}} 运行效果 NgFor NgFor和我们js中for循环渲染数据是一致,所以这里是比较容易理解,简单演示一下...在需要使用数据绑定组件进行数据处理 import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-home...官方的话:为没有 DOM 元素指令安排宿主 管道 管道其实就是具有一定功能函数,主要是一些场景是字符串什么进行简单转化,当然我们也可以自己使用自定义函数进行数据转换,只是angular给我们提供了一些初始化功能函数管道详细列表

2.5K30

AngularDart4.0 指南- 表单 顶

一路上你将学习如何: 用组件和模板构建一个Angular表单。 使用ngModel创建读取和写入输入控制值双向数据绑定。 跟踪状态变化和表单控件有效性。...你知道如何从早期页面做到这一点。 显示数据教导属性绑定。 用户输入显示如何使用事件绑定监听DOM事件以及如何使用显示值更新组件属性。 现在您需要同时显示,聆听和提取。...使用有效和原始状态 当用户删除名称时,表单应该如下所示: ?...如果没有Angular帮助,你需要做什么才能将按钮启用/禁用状态连接到表单有效性? 你来说,这很简单: 在(增强)表单元素上定义一个模板引用变量。 在多处按钮中引用该变量。...概要 Angular表单为数据修改,验证等提供支持。 在此页面中,您学习了如何使用以下功能: 一个HTML表单模板和一个带有@Component注解表单组件类。

17.4K30

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

学习如何编写显示数据并在数据绑定帮助下使用用户事件模板。 Angular应用程序管理用户看到和可以做事情,通过组件类实例(组件)和面向用户模板交互来实现这一点。...在下面的章节中,您将学习如何通过数据绑定来动态获取和设置DOM(文档对象模型)值。 从数据绑定插值第一种形式开始,看看有多少更丰富模板HTML可以使用。请回到顶部。 插值({{...}})...如果引用这些名称空间名称,则模板变量名称优先,后面是指令上下文,最后是组件成员名称。 前面的例子显示了这样一个名字冲突。 该组件具有hero属性,而* ngFor定义了英雄模板变量。...HTML属性(Attributes)和DOM属性(Properties)是不一样,即使它们具有相同名称。...表达式语言本身是为了保证您安全。您不能为属性绑定表达式中任何东西赋值,也不能使用增量和减量运算符。 当然,该表达式可能会调用具有副作用属性或方法。 Angular无法知道或阻止你。

5.1K10

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

必备条件 在继续本“英雄之旅”页面之前,请确认您在“英雄编辑器”页面之后具有以下结构。 如果您结构不匹配,请返回该页面以弄清楚您错过了什么。 ? 如果该应用尚未运行,请启动该应用。...-- each hero goes here --> 下一步你将添加英雄名字 使用ngFor指令罗列英雄 目标是将组件中英雄列表绑定到模板,迭代它们,并单独显示它们。...> {{hero.name}} 要在模板中使用Angular指令,需要在组件@Component注解指令参数中列出。...而应将样式放在.css文件中,并使用@ComponentstyleUrls参数引用该文件。 按照惯例,组件CSS和Dart文件名称具有相同基础命名前缀(app_component)。...您将Hero类移到lib / src下自己文件中。 你增加了选择英雄和显示英雄细节能力。 您了解了如何在组件模板中使用核心指令ngIf和ngFor

3K30

最受欢迎10大Angular技巧

s=20 如果你想了解更多有关令牌信息,并加深 Angular 依赖注入机制了解,请查看我在 angular.institute 上关于 DI 免费章节: https://angular.institute...因为我们使用 RxJS,所以服务可以在其中包含一个 Observable 或 Subject 并其进行一些数据转换。...s=20 扩展 Observable 或 Subject 你知道如何分辨使用高 DPI 屏幕用户吗? 你可以这样做检查,并用原生媒体标签使你应用更适合高 DPI 屏幕: ?...s=20 另一个:可以帮助编写具有很好功能微型.pipe 运算符。 ? https://twitter.com/marsibarsi/status/1277568971202584576?...s=20 你甚至可以制作自己 ngFor 替代品 最后一个:Angular 对于 for...of... 之类指令有特殊语法。这样,你可以创建自己 ngFor

2.1K40

Angular 显示英雄列表

在 src/app/ 文件夹中创建一个名叫 mock-heroes.ts 文件。 定义一个包含十个英雄常量数组 HEROES,并导出它。 该文件是这样。...="let hero of heroes"> *ngFor 是一个 Angular 复写器(repeater)指令。...这种方式让你在其它地方复用该组件更加容易,并且即使全局样式和这里不一样,组件也仍然具有期望外观。...Angular 会把所点击  上 hero 对象传给它,这个 hero 也就是前面在 *ngFor 表达式中定义那个。...用户可以选择一个英雄,并查看该英雄详情。 你使用 *ngFor 显示了一个列表。 你使用 *ngIf 来根据条件包含或排除了一段 HTML。 你可以用 class 绑定来切换 CSS 样式类。

4K30

Angular 从入坑到挖坑 - 模块简介

一、Overview Angular 入坑记录笔记第七篇,介绍 Angular模块相关概念,了解相关使用场景,以及知晓如何通过特性模块来组织我们 Angular 应用 对应官方文档地址:...@angular/common 使用 NgIf、NgFor 之类内置指令 FormsModule @angular/forms 使用 NgModel 构建模板驱动表单 ReactiveFormsModule...,通过使用 @NgModule 装饰器装饰 AppModule 类,定义了这个模块一些属性特征,从而告诉 Angular 如何编译和启动本应用 import { BrowserModule } from...每个组件都只能声明在一个 NgModule 类中,同时,如果你使用了未声明过组件,Angular 将会报错 同样,对于当前模块使用自定义指令、自定义管道,也需要在 declarations 数组中进行声明...数组中添加根组件用来作为组件树根 3.3、特性模块 特性模块是用来将特定功能或具有相关特性代码从其它代码中分离出来,聚焦于特定应用需求。

1.8K20
领券