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

将值添加到Angular的ngFor的i变量中

在Angular的ngFor指令中,i变量表示当前循环的索引值。如果想要在ngFor循环中添加值到i变量中,可以通过以下方式实现:

  1. 创建一个新的变量,例如index,用于存储i变量的值,并在循环中对其进行操作。
代码语言:txt
复制
<ng-container *ngFor="let item of items; let i = index">
  <!-- 在这里可以对i变量进行操作 -->
  <div>{{ i }}</div>
  <button (click)="addToIndex(i)">添加值到i变量</button>
</ng-container>
  1. 在组件中定义addToIndex方法,用于向i变量中添加值。
代码语言:txt
复制
addToIndex(index: number) {
  // 在这里可以向i变量中添加值
  // 例如:this.items[index] = newValue;
}

这样就可以通过点击按钮或其他操作,将值添加到Angular的ngFor的i变量中。

关于Angular的ngFor指令的更多信息,可以参考腾讯云的Angular文档: Angular文档

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

相关·内容

AngularDart 4.0 高级-结构指令 顶

您可以在分配给ngFor的字符串中启用这些功能,这是您在Angular的microsyntax中编写的。...microsyntax解析器将该字符串转换为上的属性: let关键字声明了模板中引用的模板输入变量。这个例子中的输入变量是hero,i和odd。...解析器将 let hero, let i, let odd 转换成变量名let-hero,let-i和let-odd。...Angular设置let-hero为上下文的$implicit属性的值,NgFor已经用当前迭代的hero初始化了它的值。 API指南描述了额外的NgFor指令属性和上下文属性。...当你编写自己的结构指令时,可以使用这些微观语法机制。 研究NgIf和NgFor的源代码是了解更多信息的好方法。 模板输入变量 模板输入变量是一个变量,其值可以在模板的单个实例中引用。

16.1K20
  • AngularDart4.0 指南- 显示数据 顶

    使用插值,可以将属性名称放在视图模板中,并用双花括号括起来:{{myHero}}。 按照设置说明创建名为displays_data的新项目。...> ''', Angular会自动从组件中抽取title和myHero属性的值,并将这些值插入到浏览器中。...这是语法的重要组成部分。 有关更多信息,请参阅模板语法页面。 注意ngFor指令中的hero变量; 它是模板输入变量的一个例子。...在“模板语法”页面的microsyntax部分阅读有关模板输入变量的更多信息。 Angular为列表中的每个项目复制,将hero变量设置为当前迭代中的项目(英雄)。...Angular使用该变量作为双曲花括号内插的上下文。 在这种情况下,ngFor正在显示一个列表,但ngFor可以为任何Iterable对象重复项目。

    5.3K10

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

    你将学到什么 在本文中,你将学到关于 Angular 结构指令模式的知识点。你会知道它们是什么并且怎么去使用它们。 学完本文,你将更好理解这些指令并在实际项目中使用它们。...*ngIf - 根据表达式返回的布尔值,有条件地包含一个模版(即条件渲染模版) *ngFor - 遍历数组 *ngSwitch - 渲染每个匹配的是图 下面是一个结构化指令的例子。...当表达式是 false 的时候,*ngIf 指令移除 HTML 元素。当为 true 时候,元素的副本会添加到 DOM 中。...Myshopping: string = ''; 我们有一个 MyShopping 变量,它有一个默认值,用于在模块中渲染满足条件的特定元素。...当条件值是 true 的时候,相关的元素就会被渲染到 DOM 中,其余的元素将被忽略。如果没有元素匹配,则渲染 *ngSwitchDefault 的元素到 DOM 中。

    3.8K20

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

    angular的基本语法,这样有利于后面我们进行梳理别的知识点做一些铺垫 基本语法 常见指令 NgModel NgModel就和vue中的v-model的效果是一致的,只是写法会有一些区别,vue中是可以直接进行使用的...,但是在angular中我们引入框架的一个核心模块FormsModule才可以,该指令就是将数据驱动视图的改变!...-- 使用{{}}进行数据的获取 --> {{inputData}} 运行效果 NgFor NgFor和我们js中的for循环渲染数据是一致的,所以这里是比较容易理解的,简单的演示一下.../home.component.less'] }) export class HomeComponent implements OnInit { //声明一个list类型的变量,用于验证NgFor...-- 将list的索引值获取到赋值给i --> ngFor="let item of list,let i = index">{{item.title}} - {{i}} -

    2.6K30

    AngularDart4.0 指南- 表单 顶

    一路上你将学习如何: 用组件和模板构建一个Angular表单。 使用ngModel创建读取和写入输入控制值的双向数据绑定。 跟踪状态变化和表单控件的有效性。...您将在表单中添加一个select,并使用ngFor(先前在“显示数据”页面中看到的一种技术)将选项绑定到powers列表。...要创建这样的视觉反馈,您将使用Bootstrap自定义表单类 is-valid和is-invalid。 将名为name的模板引用变量添加到Name 标记中。...使用name和类绑定来有条件地分配适当的表单有效性类。 临时将另一个名为spy的模板引用变量添加到Name 标记,并使用它显示输入的CSS类。...如果需要,可以将相同类型的错误消息添加到中,但这不是必须的,因为选择框已经将权限限制为有效值。

    17.5K30

    java中变量的默认初始值

    参考链接: Java中的变量 对于类的成员变量   不管程序有没有显示的初始化,Java  虚拟机都会先自动给它初始化为默认值。   ...1、整数类型(byte、short、int、long)的基本类型变量的默认值为0。   2、单精度浮点型(float)的基本类型变量的默认值为0.0f。   ...3、双精度浮点型(double)的基本类型变量的默认值为0.0d。   4、字符型(char)的基本类型变量的默认为 “/u0000”。   5、布尔性的基本类型变量的默认值为 false。   ...6、引用类型的变量是默认值为 null。   7、数组引用类型的变量的默认值为 null。...因此对于局部变量,必须先经过显示的初始化,才能使用它。    如果编译器确认一个局部变量在使用之前可能没有被初始化,编译器将报错。

    5.6K40

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

    ngFor指令遍历组件的英雄列表并为该列表中的每个英雄呈现该模板的一个实例。 表达式部分将hero标识为模板输入变量,其中包含每个迭代的英雄详情。...你可以在模板中引用这个变量来访问当前英雄的属性。...在显示数据的Showing a list property with *ngFor部分阅读更多关于ngFor和模板输入变量和模板语法页的ngFor部分 在节点内添加内容hero模板变量来显示英雄属性...onSelect(hero)表达式调用AppComponent方法onSelect(),传递模板输入变量hero作为参数。 这是你在ngFor指令中定义的同一个英雄变量。...在模板中,将以下绑定添加到标记中: [class.selected]="hero === selectedHero" 当表达式(hero === selectedHero)为true时,Angular

    3K30

    AngularDart 4.0 高级-管道 顶

    The hero's birthday is {{ birthday | date }} 在插值表达式中,通过管道运算符(|)将组件的生日值传递给右侧的日期管道函数。...在前面的例子中,你没有列出DatePipe,因为所有的Angular内置管道都是预先注册的。 要在实例中查看行为(查看源代码),请更改模板中的值和可选的指数。...="let hero of heroes"> {{hero.name}} 伴随组件类提供英雄,将英雄添加到列表中,并可以重置列表。...飞行英雄管道 将一个FlyingHeroesPipe添加到*ngFor迭代器,该迭代器将英雄列表过滤到只能飞行的英雄。...注意如何添加一个英雄: heroes.add(hero); 您将英雄添加到英雄列表中。 对列表的引用没有改变。 这是同一个列表。 这都是Angular关心的。

    6.4K20

    手动将 OpenWithProgids 键和值添加到 Windows 注册表所需执行的步骤

    4、查找表示要与特定程序关联的文件类型的键。例如,如果要将文件类型“.txt”与程序相关联,则需要查找“.txt”键。...使用要与程序关联的文件扩展名命名密钥。 6、找到或创建密钥后,右键单击它并选择“新建”和“密钥”。将新密钥命名为“OpenWithProgids”。...7、选择您刚刚创建的 OpenWithProgids 键,然后右键单击窗口右侧并选择“新建”和“字符串值”。将新值命名为要与文件类型关联的程序的名称。...8、双击刚刚创建的值,在“值数据”字段中输入程序可执行文件的名称(例如记事本.exe),然后单击“确定”。 9、关闭注册表编辑器,您指定的文件类型现在将与您指定的程序相关联。...请注意,如果您不熟悉注册表,修改注册表可能会很危险,如果操作不正确,可能会导致严重的系统问题。还建议在进行任何更改之前备份注册表。

    16110

    linux中删除export变量名中的某个值

    在Linux中,如果你想要从export变量名中删除某个值,可以使用以下方法:查看当前export变量名的值在终端中输入以下命令,查看当前export变量名的值: echo $EXPORT_VARIABLE...删除变量名中的某个值如果你想从export变量名中删除某个值,可以使用sed命令: export EXPORT_VARIABLE=$(echo $EXPORT_VARIABLE | sed 's/:的值中包含了斜杠。...验证变量名的值是否已经被删除在终端中输入以下命令,查看当前export变量名的值是否已经被删除: echo $EXPORT_VARIABLE 如果输出的结果中不包含你要删除的值,则表示变量名的值已经被成功删除...注意:以上命令只是在当前终端中删除了export变量名的某个值。如果你想要永久删除某个值,需要将相关的命令添加到~/.bashrc或.bash_profile文件中。

    1.5K10

    Angular 从入坑到挖坑 - 表单控件概览

    将数据值和一些对于用户的行为约束(某个字段必须填啊、某个字段长度超过了长度限制啊)绑定到组件的模板中,从而完成与用户的交互 4.2.1、模板驱动表单的双向数据绑定 在根模块中引入 FormsModule...,在使用时,通过将控件的实例赋值给属性,后续则可以通过监听这个自定义的属性来跟踪表单控件的值和状态 import { Component, OnInit } from '@angular/core';...,然后将控件组中的每一个控件作为属性值添加到实例中 import { Component, OnInit } from '@angular/core'; // 引入 FormControl 和 FormGroup...同模板驱动表单的数据有效性验证相同,在响应式表单中同样可以使用原生的表单验证器,在设定规则时,需要将模板中控件名对应的数据值的第二个参数改为验证的规则 在响应式表单中,数据源来源于组件类,因此应该在组件类中直接把验证器函数添加到对应的...]', // 将指令注册到 NG_VALIDATORS 使用 multi: true 将该验证器添加到现存的验证器集合中 providers: [{ provide: NG_VALIDATORS

    18.9K20
    领券