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

如何使用ngfor显示数据,但在运行时决定属性名称

ngFor是Angular框架中的一个指令,用于在模板中循环显示数据。它可以用来遍历数组或对象,并为每个元素生成相应的HTML元素。

要在运行时决定属性名称,可以使用JavaScript的动态属性访问方式。在ngFor循环中,可以通过使用方括号语法来动态设置属性名称。

以下是一个示例,展示了如何使用ngFor显示数据并在运行时决定属性名称:

在组件中,首先定义一个包含数据的数组或对象。例如,假设我们有一个包含学生信息的数组:

students = [ { name: 'Alice', age: 20 }, { name: 'Bob', age: 22 }, { name: 'Charlie', age: 21 } ];

在模板中,使用ngFor指令来循环遍历学生数组,并使用动态属性访问方式来决定属性名称。例如,我们可以使用ngFor循环来显示每个学生的姓名和年龄:

<ul> <li *ngFor="let student of students"> {{ student.name }}: {{ student['age'] }} </li> </ul>

在上面的示例中,*ngFor指令用于循环遍历学生数组。在每次循环中,我们使用动态属性访问方式student['age']来决定属性名称,以显示学生的年龄。

这样,当运行应用程序时,ngFor将根据数据数组的长度动态生成相应数量的li元素,并在每个li元素中显示学生的姓名和年龄。

推荐的腾讯云相关产品:腾讯云云服务器(CVM)和腾讯云数据库(TencentDB)。

  • 腾讯云云服务器(CVM):提供可扩展的计算能力,可用于部署和运行应用程序。了解更多信息,请访问:腾讯云云服务器
  • 腾讯云数据库(TencentDB):提供可靠的数据库解决方案,包括关系型数据库和NoSQL数据库。了解更多信息,请访问:腾讯云数据库
相关搜索:如何使用*ngFor在typescript中显示分组数据如何使用*ngFor在Angular中显示数据行如何修复在绘图时显示数据,但在使用dash运行时显示为空的绘图?如何使用ngFor在angular中获取和显示ngrx存储数据如何在Angular 7中使用ngFor显示嵌套的json数据我的组合框如何显示名称列表,但在选择名称时使用与该名称关联的唯一ID?如何使用ngx-smart-modal 6通过ngFor循环显示对象数据?如何在不为输入值创建单独div的情况下使用ngFor显示数据如何使用javascript显示具有数组名称属性的文本字段的输入值如何使用rails 4显示数据库中的链接和链接名称Json记录没有显示所有数据。如何使用"per_page“属性?如何使用属性文件或xml文件根据提供的参数显示数据如何在仅显示数据时禁用表单的字段,但在使用新表单输入数据时启用字段Angular如何使用click函数根据国家名称提取和显示特定的JSON数据如何使用*ngFor structural指令减少在表中显示列表(从数据库获取的json对象)的时间?如何使用要在React Table中显示的另一个数据数组,按id或名称过滤数据数组?如何在不知道feilds名称的情况下使用expressjs在前台显示mongodb中的数据如何使用php和mysqli在html页面中显示数据库中的用户帐号图片和名称?d3.js:如何使用来自父节点的数据?(在各个栏的工具提示中显示分组的栏名称)如何使用具有相同类名的select元素的值在同一名称数据属性上设置不同的值
相关搜索:
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

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

以前缀类开始,可选地跟一个点(.)和一个CSS类的名字替代括号内的元素属性:[class.class-name]。 以下示例显示如何使用class绑定来添加和删除应用程序的“special”类。...NgModel - 与[(ngModel)]形成元素的双向绑定 在开发数据输入表单时,通常都会显示数据属性,并在用户进行更改时更新该属性使用NgModel指令进行双向数据绑定使得这一切变得简单。...谁可以记住要设置哪个元素属性以及哪个元素事件发出用户更改? 如何从输入框中提取当前显示的文本,以便更新数据属性? 谁想每一次都看看?...下一个示例捕获名为i的变量中的索引,并使用像这样的英雄名称显示它。...不要在同一模板中多次定义相同的变量名称运行时值将是不可预知的。 你可以使用ref-前缀替代#。 本示例将fax变量声明为ref-fax,而不是#fax。

30K20

AngularDart4.0 指南- 显示数据

您可以通过将HTML模板中的控件绑定到Angular组件的属性显示数据。 在这个页面中,您将创建一个包含英雄列表的组件。 您将显示英雄名单的列表,并有条件地在列表下方显示一条消息。...用插值显示组件属性 显示组件属性的最简单方法是通过插值来绑定属性名称使用插值,可以将属性名称放在视图模板中,并用双花括号括起来:{{myHero}}。...您可以使用模板属性内联定义它,也可以使用组件元数据@Component注解的templateUrl属性链接到单独定义模板的HTML文件。...这里的应用程序使用内联的HTML,因为模板很小,演示更简单,没有额外的HTML文件。 在任一种样式中,模板数据绑定都具有对组件属性的相同访问权限。...概要 现在你知道如何使用: 用双花括号插入来显示组件属性ngFor显示项目列表。 Dart类,用于为您的组件生成模型数据显示该模型的属性。 ngIf有条件地显示基于布尔表达式的HTML块。

5.3K10
  • AngularDart 4.0 高级-结构指令 顶

    NgIf指向指令类; ngIf引用指令的属性(attribute)名称。 指令类拼写使用UpperCamelCase(NgIf)。 指令的属性名称拼写使用lowerCamelCase(ngIf)。...该指南在谈论其属性以及指令的功能时引用了指令类。 指南在描述如何将指令应用于HTML模板中的元素时引用了属性(attribute)名称。...这些是两个NgFor输入属性名称。 这就是指令如何得知列表是heroes,并且track-by功能是trackById。 当NgFor指令遍历列表时,它会设置并重置其自己的上下文对象的属性。...括号定义了一个CSS属性选择器。 指令属性名称使用lowerCamelCase拼写,并以前缀开头。 不要使用ng。 该前缀属于Angular。 选择适合您或您公司的简短内容。...在没有合适的宿主元素时使用作为分组元素。 Angular将星号(*)语法解析为。 NgIf,NgFor和NgSwitch内置指令如何工作。

    16.1K20

    Angular2 之 结构型指令几个概念

    在哪里去显示,viewcontain 怎么注入,属性的set语法的使用,是便捷的监听属性值变化的途径。 Angular 有一个强力的模板引擎,它能让你轻松维护元素的DOM树结构。...angular会继续检查哪些能影响数据绑定的变更。组件原本要做的哪些事情仍然在进行!它还是占用着那么多的资源。 另外一方面,重新显示这个组件会很快。...标签 结构型指令,比如ngIf,使用HTML 5的template标签 完成它们的“魔法”。 控制Template标签内DOM添加与显示,在模板级别使用的。...要么显示的包含在Template标签中,要么隐式的使用*这种语法糖去包装在Template标签中。它简化了ngIf和ngFor —— 无论是写还是读。...它把指令移到了 标签上,成为该标签的一个属性绑定 —— 包装在方括号中。 宿主组件的condition 属性的布尔值决定该模板的内容是否应该被显示

    3K20

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

    在模板中显示英雄名称  要在无序列表中显示英雄名称,请将所有当前模板替换为以下HTML:lib/app_component.html (heroes template) {{title}} 下一步你将添加英雄名字 使用ngFor指令罗列英雄 目标是将组件中的英雄列表绑定到模板,迭代它们,并单独显示它们。...在显示数据的Showing a list property with *ngFor部分阅读更多关于ngFor和模板输入变量和模板语法页的ngFor部分 在节点内添加内容hero模板变量来显示英雄属性...而应将样式放在.css文件中,并使用@Component的styleUrls参数引用该文件。 按照惯例,组件的CSS和Dart文件的名称具有相同的基础命名前缀(app_component)。...你增加了选择英雄和显示英雄的细节的能力。 您了解了如何在组件模板中使用核心指令ngIf和ngFor。 您在CSS文件中定义了样式,并使用它们来设置应用程序的样式。

    3K30

    Angular 2 数据显示

    本章节我们将为大家介绍如何数据显示到用户界面上,可以使用以下三种方式: 通过插值表达式显示组件的属性 通过 NgFor 显示数组型属性 通过 NgIf 实现按条件显示 ---- 通过插值表达式显示组件的属性...要显示组件的属性,插值是最简单的方式,格式为:{{属性名}}。...export class AppComponent { title = '站点列表'; mySite = '菜鸟教程'; } Angular 会自动从组件中提取 title 和 mySite 属性的值...,并显示在浏览器中,显示信息如下: 使用 ngFor 显示数组属性 我们也可以循环输出多个站点,修改以下文件: app/app.component.ts 文件: import { Component }...template: ` {{title}} 我喜欢的网站: {{mySite}} 网站列表: <li *ngFor

    2.4K20

    AngularDart4.0 指南- 表单 顶

    使用ngModel双向数据绑定语法将数据属性绑定到每个表单控件。 为每个表单输入控件添加一个ngControl指令。 添加自定义CSS来提供视觉反馈。 显示和隐藏验证错误消息。...您将在表单中添加一个select,并使用ngFor(先前在“显示数据”页面中看到的一种技术)将选项绑定到powers列表。...p模板输入变量在每次迭代中是不同的power; 您使用插值语法显示名称。 与ngModel的双向数据绑定 现在运行应用程序有点令人失望。 ? 你没有看到英雄数据,因为你还没有绑定到英雄。...你知道如何从早期的页面做到这一点。 显示数据教导属性绑定。 用户输入显示如何使用事件绑定监听DOM事件以及如何使用显示的值更新组件属性。 现在您需要同时显示,聆听和提取。...显示错误消息。 您可以通过根据名称控制的状态设置的隐藏属性来控制错误消息的可见性。

    17.5K30

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

    每个接口都有一个单一的钩子方法,其名称是以ng开头的接口名称。...ngOnInit 在Angular首次显示数据绑定属性并设置指令/组件的输入属性后,初始化指令/组件。 在第一次ngOnChanges之后调用一次。...OnChanges 看看每次组件输入属性发生变化时,Angular如何用变更对象调用ngOnChanges钩子。 显示如何解释更改对象。...Angular团队负责人Misko Hevery解释了为什么您应该避免使用复杂的构造函数逻辑。 不要在组件构造函数中获取数据。您不应该担心当在测试下创建或决定显示之前时新组件会尝试联系远程服务器。...ngOnInit是组件获取其初始数据的好地方。 教程和HTTP章节显示如何。 还要记住,指令的数据绑定输入属性在构建之后才会设置。 如果您需要根据这些属性初始化指令,那么这是一个问题。

    6.2K10

    Angular 2 架构(下)

    数据绑定(Data binding) 数据绑定为应用程序提供了一种简单而一致的方法来显示数据以及数据交互,它是管理应用程序里面数值的一种机制。...插值 : 在 HTML 标签中显示组件值。 {{title}} 属性绑定: 把元素的属性设置为组件中属性的值。...在Angular中包含以下三种类型的指令: 属性指令:以元素的属性形式来使用的指令。 结构指令:用来改变DOM树的结构 组件:作为指令的一个重要子类,组件本质上可以看作是一个带有模板的指令。... *ngFor 告诉 Angular...在传统的开发模式中,调用者负责管理所有对象的依赖,循环依赖一直是梦魇,而在依赖注入模式中,这个管理权交给了注入器(Injector),它在软件运行时负责依赖对象的替换,而不是在编译时。

    2.2K20

    Angular 显示英雄列表

    在本页面,你将扩展《英雄指南》应用,让它显示一个英雄列表, 并允许用户选择一个英雄,查看该英雄的详细信息。 创建模拟(mock)英雄数据 你需要一些英雄数据以供显示。...> 元素,以显示单个 hero 的属性。...它会为列表中的每项数据复写它的宿主元素。 在这个例子中  就是 *ngFor 的宿主元素 heroes 就是来自 HeroesComponent 类的列表。...英雄们显示在列表中,并且所点英雄的详情也显示在了页面的下方。 修复 - 使用 *ngIf 来隐藏空白的细节 该组件应该只有当 selectedHero 存在时才显示所选英雄的详情。...你使用 *ngFor 显示了一个列表。 你使用 *ngIf 来根据条件包含或排除了一段 HTML。 你可以用 class 绑定来切换 CSS 的样式类。

    4.4K70

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

    学习如何编写显示数据并在数据绑定的帮助下使用用户事件的模板。 Angular应用程序管理用户看到和可以做的事情,通过组件类实例(组件)和面向用户的模板的交互来实现这一点。...您可以使用组件和指令出现的新元素和属性来扩展模板的HTML词汇表。 在下面的章节中,您将学习如何通过数据绑定来动态获取和设置DOM(文档对象模型)值。...如果引用这些名称空间的名称,则模板变量名称优先,后面是指令的上下文,最后是组件的成员名称。 前面的例子显示了这样一个名字冲突。 该组件具有hero属性,而* ngFor定义了英雄模板变量。...Angular可能会或可能不会显示更改的值。Angular可能会检测到更改并发出警告错误。通常来说,保留数据属性和方法返回值就够了。...它在显示它们之前清理这些值。 它不允许带脚本标记的HTML泄露到浏览器中,既不能使用插值也不能使用属性绑定。 <!

    5.2K10

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

    注意是如何在原生HTML元素中合适的存放。 自定义组件与原生HTML在相同的布局中无缝混合。 元数据 ? 元数据告诉Angular如何处理一个类。...双向数据绑定是一个重要的第四种形式,它使用ngModel指令将属性和事件绑定在一个符号中。...还有其他两种指令:结构和属性指令。 它们倾向于以属性的形式出现在元素标签内,有时候以名称的形式出现,但更常见的是作为赋值或绑定的目标。 结构指令通过添加,删除和替换DOM中的元素来改变布局。...属性指令会改变现有元素的外观或行为。 在模板中,它们看起来像常规的HTML属性,因此也就是名称。 实现双向数据绑定的ngModel指令是一个属性指令的例子。...ngModel通过设置其显示属性并响应更改事件来修改现有元素(通常是)的行为。

    7.9K30

    【Appetite】ionic3实录(六)首页实现

    前文再续,书接上一回,上上回说到自定义组件,本节应该讲怎么做自定义组件的同时怎么调用的,只是本实例应做自定义组件的有好几个,不可能每个都写出来讲解,这会显得冗余了,所以决定只把其中一个较有代表性的做成自定义组件.../assets/imgs/foods/4.jpg"} ] }] } 这类似一个服务接口返回来的数据,success属性是为了和上一节的基本网络服务格式一致而设定的属性,type...属性为0表示画廊,1为视频,其它的应该从字段名称大致知道是什么东西吧?...: getFriendNews(){ //第二个参数为false表示使用相对路径 return this.commonProvider.get(".....initSwiper方法貌似要在页面渲染完成后才能使用,而getFriendNews获取数据后未必渲染完成,故不能马上调用,所以调用this.cd.detectChanges()来处理下,关于这个可以查看我另一篇文章

    1.1K40
    领券