首页
学习
活动
专区
工具
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:直接使用[]推荐 注意:属性绑定通常赋值为变量,如果赋值为常量(字符串常量必须用引号括起来,) <p [title...Angular指令分三类: 1.组件指令:NG中Component继承自Directive 2.结构型指令:会影响DOM树结构,必须使用开头,ngFor,*ngIf 3.属性型指令:不会影响DOM...-- 用ngModel现在不能识别,需要导入依赖 --> 注意:直接使用ngModel会直接报错,原因是没有导入模块...ngModel指令在FormsModule模块中,使用之前必须添加 在app.module.ts主模块中导入模块 import {FormsModule} from'@angular/forms'

3.5K10

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

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

29.9K20

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

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

2.5K30

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.3K41

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.4K30

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.6K10

AngularDart 4.0 高级-结构指令 顶

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

16K20

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

-- each hero goes here --> 下一步你将添加英雄名字 使用ngFor指令罗列英雄 目标是将组件中英雄列表绑定到模板,迭代它们,并单独显示它们。...通过添加核心指令* ngFor修改标签。 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 以此为模板,循环渲染出所有的数据 <p *ngFor="let item of products; let...指令上下文中 index 属性在每次迭代中,会获取到条数据索引值 当渲染数据发生改变时 4,会导致 dom 元素重新渲染,此时可以采用 trackBy 方式,通过在组件中添加一个方法,指定循环需要跟踪属性值...,此时当渲染数据发生改变时,只会重新渲染变更了指定属性值数据 不使用 trackBy 跟踪属性 <p *ngFor="let item of products; let

15.7K30

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 样式类。

4.4K70

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
领券