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

如何在ngModel angular 2中使用ngFor的索引

在ngModel Angular 2中使用ngFor的索引,可以通过以下步骤实现:

  1. 首先,确保已经导入了FormsModule,以便使用ngModel指令。在你的模块文件中,添加以下导入语句:
代码语言:typescript
复制
import { FormsModule } from '@angular/forms';
  1. 在你的组件模板中,使用ngFor指令来遍历一个数组或对象,并使用let关键字来声明一个临时变量来存储当前迭代的元素。同时,使用index关键字来获取当前迭代的索引。例如:
代码语言:html
复制
<div *ngFor="let item of items; let i = index">
  <input [(ngModel)]="item" name="item{{i}}">
</div>

在上面的例子中,我们使用ngFor指令遍历名为items的数组,并使用let item来声明一个临时变量来存储当前迭代的元素。同时,使用let i = index来声明一个临时变量i来存储当前迭代的索引。

  1. 确保你的组件类中有一个名为items的数组,用于存储要迭代的数据。例如:
代码语言:typescript
复制
items: string[] = ['item1', 'item2', 'item3'];

在上面的例子中,我们声明了一个名为items的数组,并初始化了一些字符串元素。

这样,当你在输入框中修改ngModel绑定的值时,对应的数组元素也会被更新。

关于ngModel和ngFor的更多信息,你可以参考腾讯云的Angular开发文档:

请注意,以上答案仅供参考,具体实现可能会根据你的项目需求和版本而有所不同。

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

相关·内容

Angular核心概念:数据绑定

:[(ngModel)]---重点 Angular核心概念:数据绑定 (1)HTML绑定:{{NG表达式}} (2)属性绑定 (3)指令绑定 (4)事件绑定() (5)双向数据绑定指令:[(ngModel... 形式2:直接使用[]推荐 注意:属性绑定通常赋值为变量,如果赋值为常量(如字符串常量必须用引号括起来,如) Angular中的指令分三类: 1.组件指令:NG中Component继承自Directive 2.结构型指令:会影响DOM树结构,必须使用开头,如ngFor,*ngIf 3.属性型指令:不会影响DOM...-- 用ngModel现在不能识别,需要导入依赖 --> ngModel)]="uname" > 注意:直接使用ngModel会直接报错,原因是没有导入模块...ngModel指令在FormsModule模块中,使用之前必须添加 在app.module.ts主模块中导入模块 import {FormsModule} from'@angular/forms'

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

    使用HTML表单元素(如和)的双向绑定会很方便。 但是,没有原生HTML元素遵循x值和xChange事件模式。...Angular应该能够捕获组件的数据属性,并使用[(ngModel)]语法将其设置为一个声明: ngModel)]="currentHero.name"> [(ngModel)]是你需要的吗...分配给* ngFor的文本是指导迭代器进程的指令。 *ngFor微语法 分配给* ngFor的字符串不是模板表达式。 这是一种微语法 - Angular解释的一种小语言。...* ngFor与index(索引) NgFor指令上下文的index属性返回每个迭代中项目的从零开始的索引。 您可以捕获模板输入变量中的index,并在模板中使用它。...下一个示例捕获名为i的变量中的索引,并使用像这样的英雄名称来显示它。

    30K20

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

    文章目录 前文回顾 基本语法 常见指令 NgModel NgFor NgIf Ng-container 管道 前文回顾 前面已经写了关于angular项目的基本介绍和如何创建一个angular项目,这一篇主要梳理一些...angular的基本语法,这样有利于后面我们进行梳理别的知识点做一些铺垫 基本语法 常见指令 NgModel NgModel就和vue中的v-model的效果是一致的,只是写法会有一些区别,vue中是可以直接进行使用的...-- [(ngModel)] 是angular的绑定数据的语法 --> ngModel)]="inputData" /> 使用{{}}进行数据的获取 --> {{inputData}} 运行效果 NgFor NgFor和我们js中的for循环渲染数据是一致的,所以这里是比较容易理解的,简单的演示一下...-- 将list的索引值获取到赋值给i --> ngFor="let item of list,let i = index">{{item.title}} - {{i}} -

    2.6K30

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

    主要是因为前段时间写过一些关于Angualr的相关实战文章,有些爱学习的小伙伴对这方面比较感兴趣,但是又不知道该怎么入手(因为认识我的大多数小伙伴都是后端的同学),所以今天准备出一篇Angular学习资料汇总和日常开发中使用比较频繁的语法总结..." id="example-ngModel" name='currentName'> //注意某些情况下需要加name表示唯一标识,不加的话可能会报错 导入 FormsModule 以使用 ngModel...要想在双向数据绑定中使用 ngModel 指令,必须先导入 FormsModule 并将其添加到 NgModule 的 imports 列表中。...ngFor循环的使用: 属性index、count、first、last、even、odd index属性提供当前对象的索引 count提供当前数据集的长度,类似于datasource.length...ng-jq 定义应用必须使用到的库,如:jQuery ng-keydown 规定按下按键事件的行为 ng-keypress 规定按下按键事件的行为 ng-keyup 规定松开按键事件的行为 ng-list

    5.4K41

    Angular 6.x 表单快速入门

    阅读须知 本教程的开发环境及开发语言: Angular 6.x Angular CLI TypeScript 基础知识 Angular CLI 基本使用 安装 Angular CLI (可选) $ npm...Driven 表单的特点 使用方便 适用于简单的场景 通过 [(ngModel)] 实现数据双向绑定 自动生成 Form Model (异步) 最小化组件类的代码 不易于单元测试 Reactive 表单的特点...在 Angular 中,我们可以通过 #userName="ngModel" 方式获取 ngModel 对象,然后通过该对象的 errors 属性,来获取对应验证规则 (如 required, minlength...在 Angular 中,我们可以使用熟悉的 标签来创建表单。...在 Angular 中表单控件有以下状态,我们可以通过 #userName="ngModel" 方式获取 ngModel 对象,进而获取控件的状态信息。

    4.6K20

    AngularDart4.0 指南- 表单 顶

    一路上你将学习如何: 用组件和模板构建一个Angular表单。 使用ngModel创建读取和写入输入控制值的双向数据绑定。 跟踪状态变化和表单控件的有效性。...Angular可不使用Bootstrap类或任何外部库的样式。 Angular的应用程序可以使用任何CSS库或不使用。...您将在表单中添加一个select,并使用ngFor(先前在“显示数据”页面中看到的一种技术)将选项绑定到powers列表。...你可以使用你已经知道的技术,但是你会使用新的[(ngModel)]语法,这使得绑定到模型的表单变得容易。...模板引用变量,如heroForm和name。 双向数据绑定([(ngModel)])。 用于验证和表单元素更改跟踪的NgControl 指令。

    17.5K30

    AngularDart 4.0 高级-结构指令 顶

    您可以在分配给ngFor的字符串中启用这些功能,这是您在Angular的microsyntax中编写的。...Angular设置let-hero为上下文的$implicit属性的值,NgFor已经用当前迭代的hero初始化了它的值。 API指南描述了额外的NgFor指令属性和上下文属性。...ngFor="let hero of heroes">{{hero.name}} 如果没有宿主元素,通常可以将内容包装在本机HTML容器元素(如)中,然后将该指令附加到该容器...指令属性名称应使用lowerCamelCase拼写,并以前缀开头。 不要使用ng。 该前缀属于Angular。 选择适合您或您公司的简短内容。 在这个例子中,前缀是my。...在没有合适的宿主元素时使用作为分组元素。 Angular将星号(*)语法解析为。 NgIf,NgFor和NgSwitch内置指令如何工作。

    16.1K20

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

    一、Overview angular 入坑记录的笔记第三篇,介绍 angular 中表单控件的相关概念,了解如何在 angular 中创建一个表单,以及如何针对表单控件进行数据校验。...而响应式表单在表单数据发生变更时,FormControl 实例会返回一个新的数据模型,而不是直接修改原来的数据模型 4.2、模板驱动表单 通过使用表单的专属指令(例如 ngModel 进行双向数据绑定)...在使用 ngModel 进行模板绑定时,angular 在 form 标签上自动附加了一个 NgForm 指令,因为 NgForm 指令会控制表单中带有 ngModel 指令和 name 属性的元素,而...name 属性则是 angular 用来注册控件的 key,所以在表单中使用 ngModel 进行双向数据绑定时,必须要添加 name 属性 4.2.2、跟踪表单控件的状态 在表单中使用 ngModel...在模板驱动表单中,因为不是直接使用的 FormControl 实例,因此这里应该在模板上添加一个自定义的指令来完成对于控件数据的校验 使用 angular cli 创建一个用来进行表单验证的指令 ng

    18.9K20

    Angular 2 表单(下)

    使用 ngModel 进行双向数据绑定 接下来我们使用 ngModel 进行双向数据绑定,通过监听 DOM 事件,来实现更新组件的属性。...修改 app/site-form.component.html ,使用 ngModel 把我们的表单绑定到模型。...每一个 input 元素都有一个 name 属性, Angular 的表单模块需要使用它为表单注册控制器。 运行以上实例输出结果如下: {{diagnostic}} 只是用于测试时候输出数据使用。...我们还可以通过 ngModel 跟踪修改状态与有效性验证,它使用了三个 CSS 类来更新控件,以便反映当前状态。...通过 ngSubmit 来提交表单 我们可以使用 Angular 的指令 NgSubmit 来提交表单, 并且通过事件绑定机制把它绑定到 SiteFormComponent.submit() 方法上。

    1.7K10

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

    -- each hero goes here --> 下一步你将添加英雄名字 使用ngFor指令罗列英雄 目标是将组件中的英雄列表绑定到模板,迭代它们,并单独显示它们。...通过添加核心指令* ngFor修改标签。 ngFor="let hero of heroes"> ngFor的前缀(*)是此语法的关键部分。...> {{hero.name}} 要在模板中使用Angular指令,需要在组件的@Component注解的指令参数中列出。...当表达式为false时,Angular删除选定的类。 ===运算符测试给定的对象是否相同。 在模板语法指南中阅读有关[class]绑定的更多信息。  ...您将Hero类移到lib / src下的自己的文件中。 你增加了选择英雄和显示英雄的细节的能力。 您了解了如何在组件模板中使用核心指令ngIf和ngFor。

    3K30

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

    一、Overview angular 入坑记录的笔记第二篇,介绍组件中的相关概念,以及如何在 angular 中通过使用组件来完成系统功能的实现 对应官方文档地址: 显示数据 模板语法 用户输入 组件之间的交互...管道 生命周期钩子 配套代码地址:angular-practice/src/components-guide 二、Contents Angular 从入坑到弃坑 - Angular 使用入门 Angular...,再次显示时不用重新进行初始化过程 NgFor:通过定义单条数据的显示格式,angular 以此为模板,循环渲染出所有的数据 ngFor="let item of products; let...指令上下文中的 index 属性在每次迭代中,会获取到条数据的索引值 当渲染的数据发生改变时 4,会导致 dom 元素的重新渲染,此时可以采用 trackBy 的方式,通过在组件中添加一个方法,指定循环需要跟踪的属性值...,此时当渲染的数据发生改变时,只会重新渲染变更了指定的属性值的数据 不使用 trackBy 跟踪属性 ngFor="let item of products; let

    15.8K30

    Angular 显示英雄列表

    ="let hero of heroes"> *ngFor 是一个 Angular 的复写器(repeater)指令。...它会为列表中的每项数据复写它的宿主元素。 在这个例子中  就是 *ngFor 的宿主元素 heroes 就是来自 HeroesComponent 类的列表。...Angular 会把所点击的  上的 hero 对象传给它,这个 hero 也就是前面在 *ngFor 表达式中定义的那个。...英雄们显示在列表中,并且所点英雄的详情也显示在了页面的下方。 修复 - 使用 *ngIf 来隐藏空白的细节 该组件应该只有当 selectedHero 存在时才显示所选英雄的详情。...用户可以选择一个英雄,并查看该英雄的详情。 你使用 *ngFor 显示了一个列表。 你使用 *ngIf 来根据条件包含或排除了一段 HTML。 你可以用 class 绑定来切换 CSS 的样式类。

    4.4K70

    Angular4记账webApp练手项目之二(在angular4项目中使用Angular WeUI)

    写在前面 在angular4项目中 例子是基于之前文章:利用angular-cli构建Angular4.X项目 可以参考官网:https://cipchk.github.io/ngx-weui/...1、如何使用第三方库,安装-引用(主要参考官方文档) 2、{{}}指令,单向绑定数据,声明数据-绑定数据 3、[(ngModel)]指令,双向绑定数据,声明数据-绑定数据 4、*ngFor指令,循环渲染...安装及引用 安装 npm install angular-weui --save 安装后还需要引用weui 样式以及我们的font-awesome图标苦,在我们项目index.html中引用 使用动态绑定样式让中间部分的高度等于页面高度-底部和顶部的高度,设置overflo为scroll; 在accounting.component.ts中添加样式数据如下: contentStyle...这里写图片描述 引用非样式的组件 例如提示框组件 html中添加元素 ts文件中引入使用

    2.2K20

    Angular 显示英雄列表

    ="let hero of heroes"> *ngFor 是一个 Angular 的复写器(repeater)指令。...它会为列表中的每项数据复写它的宿主元素。 在这个例子中  就是 *ngFor 的宿主元素 heroes 就是来自 HeroesComponent 类的列表。...Angular 会把所点击的  上的 hero 对象传给它,这个 hero 也就是前面在 *ngFor 表达式中定义的那个。...英雄们显示在列表中,并且所点英雄的详情也显示在了页面的下方。 修复 - 使用 *ngIf 来隐藏空白的细节 该组件应该只有当 selectedHero 存在时才显示所选英雄的详情。...用户可以选择一个英雄,并查看该英雄的详情。 你使用 *ngFor 显示了一个列表。 你使用 *ngIf 来根据条件包含或排除了一段 HTML。 你可以用 class 绑定来切换 CSS 的样式类。

    4K30

    Angular系列教程-第四节

    1.表单 Angular 提供了两种不同的方法来通过表单处理用户输入:响应式表单和模板驱动表单。...两者都从视图中捕获用户输入事件、验证用户输入、创建表单模型、修改数据模型,并提供跟踪这些更改的途径 使用’@angular/forms’库中的FormGroup, FormControl,FormArray...等将数据和视图进行绑定(需要引入ReactiveFormsModule) 模板驱动的表单是我们实例化好一个类的数据之后,在html中使用 NgForm 指令后将数据和表单进行绑定,使用[(ngModel...) 表单验证 同步验证器和异步验证器 备注:同步验证先执行,异步验证后执行 3.模板驱动表单使用 导入formcontrol 使用ngModel实现双向绑定 使用模板变量来获取表单 4...结构型指令 — 通过添加和移除 DOM 元素改变 DOM 布局的指令,比如ngfor、ngif 属性型指令 — 改变元素、组件或其它指令的外观和行为的指令,比如ngstyle 6.属性型指令 6.1

    2.8K50
    领券