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

将Form HTML标记与ngFor一起使用会导致ngModel使用循环变量的最新结果,而不是当前结果

。这是因为ngFor指令会创建多个表单元素,每个元素都有自己的ngModel绑定。当使用循环变量绑定ngModel时,ngFor会为每个表单元素创建一个新的ngModel实例,而不是共享同一个实例。

这种情况下,如果在循环中修改了ngModel绑定的值,会导致所有表单元素的值都被更新为最新的值。这可能会导致意外的行为,特别是在表单提交时。

为了解决这个问题,可以使用ngModel的别名语法来创建一个局部变量,然后在ngFor循环内部使用该变量进行绑定。这样每个表单元素都会使用自己的ngModel实例,避免了共享数据的问题。

示例代码如下:

代码语言:html
复制
<form>
  <div *ngFor="let item of items; let i = index">
    <input [(ngModel)]="item.value" name="item{{i}}">
  </div>
</form>

在上述示例中,我们使用了ngFor的别名语法let item of items; let i = index来创建了一个局部变量itemi。然后在input元素中使用[(ngModel)]="item.value"来绑定每个表单元素的值。

这样,每个表单元素都会有自己的ngModel实例,修改其中一个表单元素的值不会影响其他表单元素的值。

对于这个问题,腾讯云的相关产品和服务可以提供以下支持:

  1. 云原生应用开发平台:腾讯云原生应用开发平台(Tencent Cloud Native Application Development Platform)是一套全面的云原生应用开发和管理平台,提供了丰富的工具和服务,帮助开发者快速构建和部署云原生应用。了解更多信息,请访问:腾讯云原生应用开发平台
  2. 云服务器(CVM):腾讯云服务器(Cloud Virtual Machine,CVM)是一种可弹性伸缩的云计算基础设施服务,提供了高性能、可靠稳定的云服务器实例,适用于各种应用场景。了解更多信息,请访问:腾讯云服务器
  3. 云数据库MySQL版:腾讯云数据库MySQL版是一种高性能、可扩展的云数据库服务,提供了稳定可靠的MySQL数据库实例,适用于各种应用场景。了解更多信息,请访问:腾讯云数据库MySQL版

以上是对于将Form HTML标记与ngFor一起使用导致ngModel使用循环变量的最新结果的解释和相关腾讯云产品的介绍。希望能对您有所帮助。

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

相关·内容

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

Angular为此提供了一个特殊双向数据绑定语法, [(x)].  [(x)]语法属性绑定方括号[x]事件绑定圆括号(x)组合在一起。...字符串“let hero of heroes”是指: 取英雄列表中每个英雄,将其存储在本地英雄循环变量中,并使其可用于每次迭代模板HTML。...模板输入变量 hero之前let关键字创建一个名为hero模板输入变量ngFor指令迭代由父组件heroes属性返回heroes,并在每次迭代期间hero设置为列表中的当前项目。...* ngForindex(索引) NgFor指令上下文index属性返回每个迭代中项目的从零开始索引。 您可以捕获模板输入变量index,并在模板中使用它。...不要在同一模板中多次定义相同变量名称。 运行时值将是不可预知。 你可以使用ref-前缀替代#。 本示例fax变量声明为ref-fax,不是#fax。

30K20

Angular 2 表单(下)

使用 ngModel 进行双向数据绑定 接下来我们使用 ngModel 进行双向数据绑定,通过监听 DOM 事件,来实现更新组件属性。...修改 app/site-form.component.html ,使用 ngModel 把我们表单绑定到模型。...每一个 input 元素都有一个 name 属性, Angular 表单模块需要使用它为表单注册控制器。 运行以上实例输出结果如下: {{diagnostic}} 只是用于测试时候输出数据使用。...我们还可以通过 ngModel 跟踪修改状态有效性验证,它使用了三个 CSS 类来更新控件,以便反映当前状态。...删除掉 name 字段数据,显示结果如下所示: 添加一个网站 接下来我们创建一个用于添加网站表单,在 app/site-form.component.html 添加一个按钮: app/site-form.component.html

1.7K10
  • AngularDart4.0 指南- 表单 顶

    p模板输入变量在每次迭代中是不同power; 您使用插值语法显示其名称。 ngModel双向数据绑定 现在运行应用程序有点令人失望。 ? 你没有看到英雄数据,因为你还没有绑定到英雄。...诊断结果表明数值确实是从输入流向模型,再返回。 这是双向数据绑定。 有关更多信息,请参见模板语法页面上NgModel双向绑定。...[(ngModel)]表单结合使用时,定义ngControl指令是一项要求。...使用name和类绑定来有条件地分配适当表单有效性类。 临时另一个名为spy模板引用变量添加到Name 标记,并使用它显示输入CSS类。...变量(通过#name =“ngForm”语法)绑定到input元素关联NgModel

    17.5K30

    Angular 6.x 基础教程

    simple-form -it -is # 新建组件,该组件使用内联模板和内联样式 在命令行窗口运行以上命令后,输出以下内容: CREATE src/app/simple-form/simple-form.component.spec.ts...ngFor 指令 在 Angular 中我们可以使用 ngFor 指令来显示数组中每一项信息。...true even: boolean —— 若当前索引值是偶数,则返回 true odd: boolean —— 若当前索引值是奇数,则返回 true 需要注意是,*ngFor * 号是语法糖...第九节 - 使用 Output 装饰器 Output 装饰器作用是用来实现子组件信息,通过事件形式通知到父级组件。...这其中原因是,ng-style 要求参数是一个 Javascript 对象,color 是一个有效 key, background-color 不是一个有效 key ,所以需要添加 ''。

    15.6K20

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

    响应式表单在表单数据发生变更时,FormControl 实例会返回一个新数据模型,不是直接修改原来数据模型 4.2、模板驱动表单 通过使用表单专属指令(例如 ngModel 进行双向数据绑定)...,并使用 ngModel 完成组件模板之间数据双向绑定 姓名:...在使用 ngModel 进行模板绑定时,angular 在 form 标签上自动附加了一个 NgForm 指令,因为 NgForm 指令控制表单中带有 ngModel 指令和 name 属性元素,...-- ngModel 指令通过模板引用变量形式暴露出来,从而获取到控件状态 --> <input type="text" name="name" id="name"...对于模板驱动表单,同样是采用自定义指令方式进行跨字段交叉验证,单个控件验证不同,此时需要将指令添加到 form 标签上,然后使用模板引用变量来获取错误信息 import { Directive

    18.9K20

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

    angular基本语法,这样有利于后面我们进行梳理别的知识点做一些铺垫 基本语法 常见指令 NgModel NgModel就和vue中v-model效果是一致,只是写法会有一些区别,vue中是可以直接进行使用...-- 使用{{}}进行数据获取 --> {{inputData}} 运行效果 NgFor NgFor和我们js中for循环渲染数据是一致,所以这里是比较容易理解,简单演示一下...-- list索引值获取到赋值给i --> {{item.title}} - {{i}} -...:hidden是要区别开,当if判断为false时候,页面上是整个元素都消失了,不是仅仅隐藏了css样式 在需要使用数据绑定组件进行数据处理 import { Component, OnInit...运行效果 如果这个tag标签不太理解,你可以将它完全当作一个容器,当你需要对一段内容控制逻辑时候但是不知道使用什么元素标签时候就可以使用这个,在html任何场景下都可以使用

    2.5K30

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

    最后,它将这个复合插值结果赋值给一个元素或指令属性 您似乎在元素标记之间插入结果并将其分配给属性。这么想很方便,你因为这个错误受苦。虽然这不完全正确。...如果引用这些名称空间名称,则模板变量名称优先,后面是指令上下文,最后是组件成员名称。 前面的例子显示了这样一个名字冲突。 该组件具有hero属性,* ngFor定义了英雄模板变量。...{{hero.name}}中英雄是指变量输入变量不是组件属性。 模板表达式不能引用静态属性,也不能引用顶层变量或函数,如来自dart:htmlwindow 或document 。... 模板上下文字段优先于组件上下文字段。 在上面的deleteHero(hero)中,hero是模板输入变量不是组件hero属性。...一种新心智模式 借助数据绑定所有功能以及使用自定义标记扩展HTML词汇表能力,HTML模板视为HTML Plus是很有诱惑力 它确实是HTML Plus。

    5.2K10

    Angular 6.x 表单快速入门

    Driven 表单特点 使用方便 适用于简单场景 通过 [(ngModel)] 实现数据双向绑定 自动生成 Form Model (异步) 最小化组件类代码 不易于单元测试 Reactive 表单特点...比较灵活 适用于复杂场景 简化了HTML模板代码,把验证逻辑抽离到组件类中 手动创建 Form Model (同步) 方便跟踪表单控件值变化 易于动态添加表单控件 易于单元测试 本文主要介绍...Template Driven Forms (模板驱动式表单)基础知识,相关知识点以问答形式进行介绍。...在 Angular 中,我们可以使用熟悉 标签来创建表单。...AppComponent { username = 'semlinker'; } 需要注意是,在使用 标签后,我们 username 输入框,必须添加 name 属性。

    4.6K20

    AngularDart 4.0 高级-结构指令 顶

    您将在本指南中学习到星号(*)是一种便利符号,字符串是一种微型语法,不是通常模板表达式。 Angular这个符号解析成一个围绕宿主元素及其后代标记。...为什么要移除不是隐藏? 指令可以通过将其显示样式设置为无隐藏不需要段落。...NgFor指令具有比本指南中显示NgIf更多功能,包括必需和可选。 至少NgFor需要一个循环变量(let hero)和一个列表(heroes)。...在这个例子中有几个这样变量:hero,i和odd。 所有前面都有关键字let。 模板输入变量模板引用变量不同,语义和语法都不同。 您使用let关键字(let hero)声明模板输入变量。...使用星号(*)前缀表示法将它们附加到元素。当NgSwitchCaseswitch值匹配时,显示它宿主元素。

    16.1K20

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

    要想在双向数据绑定中使用 ngModel 指令,必须先导入 FormsModule 并将其添加到 NgModule imports 列表中。...循环使用: 属性index、count、first、last、even、odd index属性提供当前对象索引 count提供当前数据集长度,类似于datasource.length first返回当前列表项是否为第一个...last返回当前列表项是否为最后一个 even返回当前列表项index是否为偶数,通常用在增加样式用来区分行行之间 odd返回当前列表项index是否为奇数 <li *ngFor="let...ng-dblclick 规定双击事件行为 ng-disabled 规定一个元素是否被禁用 ng-focus 规定聚焦事件行为 ng-form 指定 HTML 表单继承控制器表单 ng-hide 隐藏或显示...文本转换为列表 (数组) ng-model 绑定 HTML 控制器值到应用数据 ng-model-options 规定如何更新模型 ng-mousedown 规定按下鼠标按键时行为 ng-mouseenter

    5.3K41

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

    :组件对应页面 HTML 模板,用来呈现组件功能 product-list.component.scss:只针对当前组件样式 product-list.component.spec.ts:当前组件单元测试文件...通过使用 $event 作为方法参数会将许多用不到模板信息传递到组件中,导致我们在仅仅是为了获取数据前提下,却需要对于页面元素十分了解,违背了模板(用户所能看到组件(应用如何去处理用户数据)...,再次显示时不用重新进行初始化过程 NgFor:通过定义单条数据显示格式,angular 以此为模板,循环渲染出所有的数据 <p *ngFor="let item of products; let...指令上下文中 index 属性在每次迭代中,获取到条数据索引值 当渲染数据发生改变时 4,导致 dom 元素重新渲染,此时可以采用 trackBy 方式,通过在组件中添加一个方法,指定循环需要跟踪属性值...,可以使用管道对于表达式结果进行转换 管道是一种简单函数,它们接受输入值并返回转换后值。

    15.8K30

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

    -- each hero goes here --> 下一步你添加英雄名字 使用ngFor指令罗列英雄 目标是组件中英雄列表绑定到模板,迭代它们,并单独显示它们。...ngFor指令遍历组件英雄列表并为该列表中每个英雄呈现该模板一个实例。 表达式部分hero标识为模板输入变量,其中包含每个迭代英雄详情。...你可以在模板中引用这个变量来访问当前英雄属性。...在显示数据Showing a list property with *ngFor部分阅读更多关于ngFor和模板输入变量和模板语法页ngFor部分 在节点内添加内容hero模板变量来显示英雄属性...onSelect(hero)表达式调用AppComponent方法onSelect(),传递模板输入变量hero作为参数。 这是你在ngFor指令中定义同一个英雄变量

    3K30

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

    您可以通过使用Angular标记组合HTML 模板,编写组件类来管理这些模板,在服务中添加应用程序逻辑以及在模块中装入组件和服务来编写Angular应用程序。 然后,通过引导根模块启动应用程序。...类似于* ngFor,{{hero.name}},(click),[hero]和代码使用Angular模板语法。...当用户点击英雄名字时,(click)事件绑定调用组件selectHero方法。 双向数据绑定是一个重要第四种形式,它使用ngModel指令属性和事件绑定在一个符号中。...用户更改也返回到组件,属性重置为最新值,就像事件绑定一样。 Angular在每个JavaScript事件循环中处理所有数据绑定,从应用程序组件树根到所有子组件。 ?...示例模板使用两个内置结构指令: lib / src / hero_list_component.html(structural) </

    7.9K30

    Angular 2 + 折腾记 :(6) 动手实现只有年月小组件

    前言 这个组件实现并不是很复杂,我会尽量注释; 这货诞生理由就是项目刚好有一个地方必须只能选择年月,github上ng2+日期组件都涉及到年月日或时分秒; 效果用gifcam录制,色彩有些失真,将就吧...---- 实现思路 月份只有十二个,只要把个位数做好补位就好 年份生成是可控(传参),当前年份往前推几年和往后推几年构成; 数据遍历结构很简单 { date:2017, // 月份是字符串,...isExpand"> <input type="text" [placeholder]="placeholder" class="<em>form</em>-control" [(ngModel)]="selected...温馨提示: 若不是以模块方式到处,只要在使用模块引入组件声明下就能使用 反之则需要引入这个模块,方可使用 局部代码 module // 在要使用模块中引入 // 公用组件 import { MitEhartsModule..."> 复制代码 ---- 总结 文章有错误之处亦或者有更好写法和建议请留言指出,及时改进和跟进...; 下一篇文章说下指令或者动画相关

    74310

    一个Angular 5教程:一步一步指导实现你第一个Angular 5应用程序

    现在,我们CardList中有我们的卡阵列。我们如何显示它不是我们目前标记?...使用它,我们可以访问由模板引用值标记任何元素 - 在这种情况下,我们表单,我们实际上声明它是我们组件公共变量形式,所以我们可以写this.form.valid。...使用模板驱动表单以前使用简单HTML表单完全相同。如果我们需要更复杂东西,那么在Angular中有一种不同形式:反应式。我们介绍转换表单后他们反应。...因此,“对结果评估不会导致任何语义上可观察到副作用或输出,例如可变对象突变或输出到I / O设备”......我们能做什么?答案在这个定义中是正确。Ngrx对救援副作用。...它代码片段Actions或多或少地与我们缩减器相同,但它不是在我们状态中改变某些内容,而是实际发送API请求,并根据结果派发新代码Actions。往常一样,展示你比告诉你更简单。

    42.6K10

    Angular 快速学习笔记(1) -- 官方示例要点

    Angular 复写器(repeater)指令,使用let xx of xxs遍历 绑定click使用 (click) <li *ngFor="let hero of heroes" (click...错误处理 使用 .pipe() 方法来扩展 Observable 结果,并给它一个 catchError() 操作符 import { catchError, map, tap } from...return of(result as T); }; } 在控制台中汇报了这个错误之后,这个处理器汇报一个用户友好消息,并给应用返回一个安全值,让它继续工作,可以使用...'getHeroes', [])) ); } 模板绑定Observable $ 是一个命名惯例,用来表明 heroes$ 是一个 Observable,不是数组...*ngFor 不能直接使用 Observable。 不过,它后面还有一个管道字符(|),后面紧跟着一个 async,它表示 Angular AsyncPipe。

    3.6K00

    Angular 快速学习笔记(1) -- 官方示例要点

    Angular 复写器(repeater)指令,使用let xx of xxs遍历 绑定click使用 (click) <li *ngFor="let hero of heroes" (click...错误处理 使用 .pipe() 方法来扩展 Observable 结果,并给它一个 catchError() 操作符 import { catchError, map, tap } from...return of(result as T); }; } 在控制台中汇报了这个错误之后,这个处理器汇报一个用户友好消息,并给应用返回一个安全值,让它继续工作,可以使用...'getHeroes', [])) ); } 模板绑定Observable $ 是一个命名惯例,用来表明 heroes$ 是一个 Observable,不是数组...*ngFor 不能直接使用 Observable。 不过,它后面还有一个管道字符(|),后面紧跟着一个 async,它表示 Angular AsyncPipe。

    3.7K50

    【Angular教程】-组件初识|8月更文挑战

    selector: 标注组件名称,在使用组件时候使用就是它 templateUrl: 标注html模板路径 styleUrls: 标注html模板使用样式路径,我们看到是用数组格式,说明传递多个样式文件应该是没有问题...: 50px; } .class3{ font-size: 20px; color: chartreuse; } 在组件html模板中绑定时候可以通过变量来选择性开启和关闭部分样式 <div...(只适用于表单元素) 在组件ts中添加属性: public value: string = 'hello world'; 在组件html中添加演示代码: <input type="text" [(ngModel...管道 angular中管道Vue中过滤器雷同,均可以使数据按指定格式进行显示,同样使用管道符来操作 内置管道: 演示: 时间格式化为统一样式 DatePipe: {{ currentTime...字符串全部转为大写 UpperCasePipe: {{ value | uppercase }} 将对象转换成json字符串在页面输出,方便调试 结语 本章我们主要演示了组件基础使用

    1.9K20

    Angular 显示英雄列表

    当依次遍历这个列表时,hero 会为每个迭代保存当前英雄对象。 不要忘了 ngFor 前面的星号(*),它是该语法中关键部分。 浏览器刷新之后,英雄列表出现了。...固然,你可以把更多样式加入到 styles.css,并且放任它随着你添加更多组件不断膨胀。 但还有更好方式。...你可以定义属于特定组件私有样式,并且让组件所需一切(代码、HTML 和 CSS)都放在一起。 这种方式让你在其它地方复用该组件更加容易,并且即使全局样式和这里不一样,组件也仍然具有期望外观。...主从结构 当用户在主列表中点击一个英雄时,该组件应该在页面底部显示所选英雄详情。 在本节,你监听英雄条目的点击事件,并更新英雄详情。...用户可以选择一个英雄,并查看该英雄详情。 你使用 *ngFor 显示了一个列表。 你使用 *ngIf 来根据条件包含或排除了一段 HTML。 你可以用 class 绑定来切换 CSS 样式类。

    4.4K70
    领券