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

如何在ngFor元素属性值计算中使用HTML索引变量?

在ngFor元素属性值计算中使用HTML索引变量可以通过Angular的内置变量index来实现。index表示当前循环的索引值,可以在ngFor指令中使用。

下面是一个示例,展示如何在ngFor元素属性值计算中使用HTML索引变量:

代码语言:txt
复制
<ul>
  <li *ngFor="let item of items; let i = index">
    <a href="#section{{i}}">Section {{i}}</a>
  </li>
</ul>

在上面的示例中,我们使用*ngFor指令循环遍历items数组,并使用let i = index将当前循环的索引值赋给变量i。然后,我们可以在<a>标签的href属性中使用{{i}}来动态计算链接的锚点。

这样,每个循环项都会生成一个带有不同索引的锚点链接,例如#section0#section1等。你可以根据实际需求修改链接的格式和属性。

推荐的腾讯云相关产品:腾讯云云服务器(CVM) 腾讯云云服务器(CVM)是一种可弹性伸缩的云计算基础设施服务,提供安全可靠、弹性扩展的计算能力。你可以根据自己的需求选择不同配置的云服务器实例,进行应用部署、网站托管、数据存储等操作。

产品介绍链接地址:腾讯云云服务器(CVM)

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

相关·内容

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

使用HTML表单元素和)的双向绑定会很方便。 但是,没有原生HTML元素遵循x和xChange事件模式。...要访问hero的属性,请参考ngFor宿主元素(或其后代内)的hero输入变量。在这里,英雄首先在插中被引用,然后传递给组件的hero属性绑定。...* ngFor与index(索引) NgFor指令上下文的index属性返回每个迭代项目的从零开始的索引。 您可以捕获模板输入变量的index,并在模板中使用它。...下一个示例捕获名为i的变量索引,并使用像这样的英雄名称来显示它。...模板引用变量警告说明 模板引用变量(#phone)与模板输入变量(let phone)不同,您在*ngFor可能看到的那样。 了解“结构指令”指南中的差异。 引用变量的范围是整个模板。

30K20
  • AngularDart 4.0 高级-结构指令 顶

    Angular设置let-hero为上下文的$implicit属性NgFor已经用当前迭代的hero初始化了它的。 API指南描述了额外的NgFor指令属性和上下文属性。...当你编写自己的结构指令时,可以使用这些微观语法机制。 研究NgIf和NgFor的源代码是了解更多信息的好方法。 模板输入变量 模板输入变量是一个变量,其可以在模板的单个实例引用。...变量的作用域限于重复模板的单个实例。 您可以在其他结构指令的定义再次使用相同的变量名称。 您通过在#(#var)前缀加上变量名称来声明一个模板引用变量。 引用变量是指其附加的元素,组件或指令。...使用星号(*)前缀表示法将它们附加到元素。当NgSwitchCase的与switch的匹配时,会显示它的宿主元素。...{{hero.name}} 如果没有宿主元素,通常可以将内容包装在本机HTML容器元素,然后将该指令附加到该容器

    16.1K20

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

    在 Angular ,有两种类型的指令。属性指令修改 DOM 元素的外观或者行为。结构指令添加或者移除 DOM 元素。 结构指令是 Angular 中最强大的特性之一,然而它们却频繁被误解。...要使用结构指令,我们需要在 HTML 模版添加一个带有指令的元素。然后根据我们在指令设置的条件或者表达式添加、删除或者替换元素。 结构指令的例子 我们添加些简单的 HTML 代码。...当表达式是 false 的时候,*ngIf 指令移除 HTML 元素。当为 true 时候,元素的副本会添加到 DOM 。...Myshopping: string = ''; 我们有一个 MyShopping 变量,它有一个默认,用于在模块渲染满足条件的特定元素。...当条件是 true 的时候,相关的元素就会被渲染到 DOM ,其余的元素将被忽略。如果没有元素匹配,则渲染 *ngSwitchDefault 的元素到 DOM

    3.8K20

    AngularDart4.0 指南- 显示数据 顶

    现场示例(查看源代码)演示了此页面描述的所有语法和代码片段。 用插显示组件属性 显示组件属性的最简单方法是通过插来绑定属性名称。...使用,可以将属性名称放在视图模板,并用双花括号括起来:{{myHero}}。 按照设置说明创建名为displays_data的新项目。...> ''', Angular会自动从组件抽取title和myHero属性,并将这些插入到浏览器。...注意ngFor指令的hero变量; 它是模板输入变量的一个例子。 在“模板语法”页面的microsyntax部分阅读有关模板输入变量的更多信息。...回到app_component.dart并删除或注释掉英雄列表的一个元素。 浏览器应该自动刷新,消息应该消失。 概要 现在你知道如何使用: 用双花括号插入来显示组件属性ngFor显示项目列表。

    5.3K10

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

    它表示元素及其子元素构成一个主模板。 ngFor指令遍历组件的英雄列表并为该列表的每个英雄呈现该模板的一个实例。...表达式部分将hero标识为模板输入变量,其中包含每个迭代的英雄详情。 你可以在模板引用这个变量来访问当前英雄的属性。...在显示数据的Showing a list property with *ngFor部分阅读更多关于ngFor和模板输入变量和模板语法页的ngFor部分 在节点内添加内容hero模板变量来显示英雄属性...刷新浏览器,该应用程序不再失败,名称列表再次显示在浏览器。 当没有选定的英雄时,ngIf指令从DOM移除英雄详情HTML。 没有英雄细节元素或绑定担心。...您了解了如何在组件模板中使用核心指令ngIf和ngFor。 您在CSS文件定义了样式,并使用它们来设置应用程序的样式。 你的应用应该看起来像这个实例(查看源代码)。

    3K30

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

    您可以使用组件和指令出现的新元素属性来扩展模板的HTML词汇表。 在下面的章节,您将学习如何通过数据绑定来动态获取和设置DOM(文档对象模型)。...My current hero is {{currentHero.name}} 您可以使用计算的字符串组织到HTML元素标记和属性赋值之间的文本。...但是它也与你习惯的HTML有很大的不同。 它需要一个新的心智模式。 在HTML开发的正常过程,您可以使用HTML元素创建一个可视结构,并通过使用字符串常量设置元素属性来修改这些元素。...您不能使用属性绑定将从目标元素拉出。 您不能绑定到目标元素属性来读取它。 你只能设置它。 同样,您不能在目标元素使用属性绑定来调用方法。...它在显示它们之前清理这些。 它不允许带脚本标记的HTML泄露到浏览器,既不能使用也不能使用属性绑定。 <!

    5.2K10

    Angular 从入坑到挖坑 - 组件食用指南

    一、Overview angular 入坑记录的笔记第二篇,介绍组件的相关概念,以及如何在 angular 通过使用组件来完成系统功能的实现 对应官方文档地址: 显示数据 模板语法 用户输入 组件之间的交互...,可以通过 angular 内置的模板语法与 html 元素进行结合,从而告诉 angular 如何根据我们的应用逻辑和数据来渲染页面 4.1.2.1、插表达式 插表达式可以将组件属性或者是模板上的数据通过模板表达式运算符进行计算...因此,这里应该使用模板引用变量的方式获取数据信息。 模板引用变量是对模板 DOM 元素的引用,提供了从模块中直接访问元素的能力。...指令上下文中的 index 属性在每次迭代,会获取到条数据的索引 当渲染的数据发生改变时 4,会导致 dom 元素的重新渲染,此时可以采用 trackBy 的方式,通过在组件添加一个方法,指定循环需要跟踪的属性...这个数据信息资源抽取出来用于说明其特征的一个结构化的数据↩ property 是 dom 元素默认的基本属性,在 dom 初始化时会被全部创建,而 attribute 是 html 标签上定义的属性

    15.8K30

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

    angular的基本语法,这样有利于后面我们进行梳理别的知识点做一些铺垫 基本语法 常见指令 NgModel NgModel就和vue的v-model的效果是一致的,只是写法会有一些区别,vue是可以直接进行使用的...-- 使用{{}}进行数据的获取 --> {{inputData}} 运行效果 NgFor NgFor和我们js的for循环渲染数据是一致的,所以这里是比较容易理解的,简单的演示一下.../home.component.less'] }) export class HomeComponent implements OnInit { //声明一个list类型的变量,用于验证NgFor...-- 将list的索引获取到赋值给i --> {{item.title}} - {{i}} -...运行效果 如果这个tag标签不太理解的,你可以将它完全当作一个容器,当你需要对一段内容控制逻辑的时候但是不知道使用什么元素标签的时候就可以使用这个,在html的任何场景下都可以使用

    2.5K30

    Angular2 之 结构型指令几个概念

    (* 与 template) 控制宿主元素的模板。 在哪里去显示,viewcontain 怎么注入,属性的set语法的使用,是便捷的监听属性变化的途径。...标签 结构型指令,比如ngIf,使用HTML 5的template标签 完成它们的“魔法”。 控制Template标签内DOM添加与显示,在模板级别使用的。...* 我们现在先把myUnless属性定义成一个“只写”属性。 * 属性发生了变化,可以展示出来。...要么显示的包含在Template标签,要么隐式的使用*这种语法糖去包装在Template标签。它简化了ngIf和ngFor —— 无论是写还是读。...宿主组件的condition 属性的布尔决定该模板的内容是否应该被显示。 ngFor Angular把*ngFor转换成一个类似的形式: <!

    3K20

    高级 Angular 组件模式 (5)

    Note: 请注意作用域的问题,如果你使用或者是一个结构性指令,比如*ngIf或者*ngFor,它会在这个模板上创建一个新的作用域,之后在其内部声明的模板引用变量无法在该模板作用域以外使用...指令与exportAs 指令可以在它的元数据声明exportAs属性,这个属性表示它被这个模板引用变量所标识,如下: // toggle.directive.ts @Directive({ selector...> // toggleOn is the ToggleOnComponent HTML元素 如果没有组件与元素绑定,模板引用变量会指向当前这个html元素。...,我在这里再补充一些,如何在组件或者指令类的内部使用。...Note: 在类获取模板引用变量所指向的引用时,请格外注意你期望获取的引用类型,在例子,我们期望获取html元素,因此这里的引用类型是ElementRef,如果是指令或者组件,则分别要对应其类型的Type

    64120

    AngularDart4.0 指南- 表单 顶

    使用模板引用变量HTML元素之间共享信息。 您可以在Plunker运行实例(查看源代码)并从那里下载代码。...hero-form的@Component选择器意味着您可以使用元素将此表单放在父模板。 templateUrl属性指向模板HTML的单独文件(您将很快创建)。...p模板输入变量在每次迭代是不同的power; 您使用语法显示其名称。 与ngModel的双向数据绑定 现在运行应用程序有点令人失望。 ? 你没有看到英雄数据,因为你还没有绑定到英雄。...对你来说,这很简单: 在(增强的)表单元素上定义一个模板引用变量。 在多处的按钮引用该变量。 显示Model(可选) 提交表单目前没有视觉效果。 预期的演示。...模板引用变量heroForm和name。 双向数据绑定([(ngModel)])。 用于验证和表单元素更改跟踪的NgControl 指令。

    17.5K30

    Angular 2 + 折腾记 :(2)初步认识angular2,不一样的开发模式

    ---- 基础概念 国内的官网--基础 词汇表(又名计算机术语--angular2 & es6 & es7) 速查表:又名demo写法表,里面涵盖了很多写法,相当于一本小字典 关于ng2的一堆为什么:..., |是管道,支持多个管道,支持内置管道和自定义管道,:跟随是管道的参数,后续文档我写一个如何自定义管道的文章 []="":绑定组件内的[单向,数据流向视图],指令,原生html控件的自身属性[value...true : false ) 直接赋值运算(item = 2); 变量传递 空保护运算符(?.) item?.a?....,用来动态判断增加多个样式 [class.a]或者[style.font-size]:单一操作类或者某个行内样式 数据遍历(*ngFor) *ngFor="let i of item; let index...= index": 可以用这个来遍历数组对象,let index = index意思是创建一个局部遍历把当前遍历的索引保存到你的自定义变量index 动态渲染(*ngIf) *ngIf="item"

    6.2K20

    Angular学习资料大全和常用语法汇总(让后端程序员轻松上手)

    Angular 会把这个名字替换为响应组件属性的字符串。...循环的使用: 属性index、count、first、last、even、odd index属性提供当前对象的索引 count提供当前数据集的长度,类似于datasource.length first返回当前列表项是否为第一个...ng-bind 绑定 HTML 元素到应用程序数据 ng-bind-html 绑定 HTML 元素的 innerHTML 到应用程序数据,并移除 HTML 字符串危险字符 ng-bind-template...false 移除 HTML 元素 ng-include 在应用包含 HTML 文件 ng-init 定义应用的初始化 ng-jq 定义应用必须使用到的库,:jQuery ng-keydown 规定按下按键事件的行为...ng-readonly 指定元素的 readonly 属性 ng-repeat 定义集合每项数据的模板 ng-selected 指定元素的 selected 属性 ng-show 显示或隐藏 HTML

    5.3K41

    Angular 2.x折腾记 :(2)初步认识angular2,不一样的开发模式

    , |是管道,支持多个管道,支持内置管道和自定义管道,:跟随是管道的参数,后续文档我写一个如何自定义管道的文章 []="":绑定组件内的[单向,数据流向视图],指令,原生html控件的自身属性[value...new运算符 使用;或.的链式表达式 自增或自减操作符 (++和--) 不支持位运算|和& 支持: 逻辑运算(|| , &&) 三目运算符( true ?...true : false ) 直接赋值运算(item = 2); 变量传递 空保护运算符(?.) item?.a?....[class.a]或者[style.font-size]:单一操作类或者某个行内样式 数据遍历(*ngFor) *ngFor="let i of item; let index = index": 可以用这个来遍历数组对象...,let index = index意思是创建一个局部遍历把当前遍历的索引保存到你的自定义变量index 动态渲染(*ngIf) *ngIf="item" : 比如loading到视图全部渲染就经常用到这个

    10510
    领券