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

Angular2 ngModel inside ngFor (数据不绑定到输入)

Angular2中,ngModel在ngFor内部(数据不绑定到输入)的问题可能是由于ngFor创建了多个相同的ngModel指令,导致数据绑定错误。解决这个问题的方法是使用唯一的标识符来区分每个ngModel指令。

以下是解决该问题的步骤:

  1. 确保在ngFor循环中使用唯一的标识符来标识每个ngModel指令。可以使用索引或唯一的属性来实现。

例如,使用索引作为标识符:

代码语言:txt
复制
<div *ngFor="let item of items; let i=index">
  <input [(ngModel)]="item.value" [name]="'input-' + i">
</div>
  1. 确保每个ngModel指令的name属性是唯一的。这是确保数据绑定正常工作的关键。
  2. 如果ngModel指令仍然无法正常工作,可以尝试使用ngModelGroup指令将多个ngModel指令包装在一起。ngModelGroup指令可以创建一个独立的表单控件组,以便正确处理数据绑定。

例如:

代码语言:txt
复制
<div *ngFor="let item of items; let i=index" [ngModelGroup]="'group-' + i">
  <input [(ngModel)]="item.value" [name]="'input-' + i">
</div>

这样,每个ngModel指令都被包装在一个独立的ngModelGroup中,确保数据绑定正常工作。

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

相关·内容

Angular核心概念:数据绑定

:[(ngModel)]---重点 Angular核心概念:数据绑定 (1)HTML绑定:{{NG表达式}} (2)属性绑定 (3)指令绑定 (4)事件绑定() (5)双向数据绑定指令:[(ngModel...循环绑定ngFor <any *ngFor=“let...,处理函数名后必须有() (5)双向数据绑定指令:[(ngModel)]—重点 方向1:Model=》View,模型变则视图变,用[]绑定 方向2:View=》Model,视图(表单元素)变则模型变,...-- 用ngModel现在不能识别,需要导入依赖 --> 注意:直接使用ngModel会直接报错,原因是没有导入模块...; import:[FormsModule] 监听事件是否绑定成功,使用ngModelChange <input placeholder="请<em>输入</em>用户名" [(ngModel)]="uname" (ngModelChange

3.5K10

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

事件绑定((event)) 到目前为止,您所遇到的绑定指令可以在一个方向上流动数据:从一个组件一个元素。 用户不只是盯着屏幕。 他们在输入框中输入文字。 他们从列表中选择项目。 他们点击按钮。...NgModel:双向数据绑定HTML表单元素。 NgClass 您通常通过动态添加和删除CSS类来控制元素的显示方式。 你可以绑定ngClass来同时添加或删除多个类。...NgModel - 与[(ngModel)]形成元素的双向绑定 在开发数据输入表单时,通常都会显示数据属性,并在用户进行更改时更新该属性。 使用NgModel指令进行双向数据绑定使得这一切变得简单。...如何从输入框中提取当前显示的文本,以便更新数据属性? 谁想每一次都看看? 该ngModel指令隐藏了自己的ngModel输入属性和ngModelChange输出属性背后的这些繁重的细节。...单独的ngModel绑定是对绑定元素原生属性的改进。 你可以做得更好。 你不应该提到数据属性两次。

30K20
  • AngularDart4.0 指南- 表单 顶

    使用ngModel双向数据绑定语法将数据属性绑定每个表单控件。 为每个表单输入控件添加一个ngControl指令。 添加自定义CSS来提供视觉反馈。 显示和隐藏验证错误消息。...您为model和power定义了模拟数据。 顺便说一句,您可以注入数据服务来获取和保存真实数据,或者将这些属性作为输入和输出(请参阅“模板语法”页面中的输入和输出属性)来绑定父组件。...您将在表单中添加一个select,并使用ngFor(先前在“显示数据”页面中看到的一种技术)将选项绑定powers列表。...p模板输入变量在每次迭代中是不同的power; 您使用插值语法显示其名称。 与ngModel的双向数据绑定 现在运行应用程序有点令人失望。 ? 你没有看到英雄数据,因为你还没有绑定英雄。...诊断结果表明数值确实是从输入流向模型,再返回。 这是双向的数据绑定。 有关更多信息,请参见模板语法页面上的与NgModel的双向绑定

    17.5K30

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

    -- each hero goes here --> 下一步你将添加英雄名字 使用ngFor指令罗列英雄 目标是将组件中的英雄列表绑定模板,迭代它们,并单独显示它们。...在显示数据的Showing a list property with *ngFor部分阅读更多关于ngFor和模板输入变量和模板语法页的ngFor部分 在节点内添加内容hero模板变量来显示英雄属性...接下来,您将通过selectedHero组件属性将主链接到详细信息,该属性绑定单击事件。...处理点击事件 添加点击事件绑定:lib/app_component.html (click) <li *ngFor="let hero of heroes" (click)="onSelect...在用户输入页面和模板语法页面的事件绑定部分了解有关事件绑定的更多信息。 添加一个点击处理程序来显示选定的英雄  你不再需要hero属性,因为你不再显示一个英雄; 你正在显示一个英雄列表。

    3K30

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

    +'描述'"> 7、[(ngModel)] :双向绑定NgModel 指令允许你显示数据属性并在用户进行更改时更新该属性。...要想在双向数据绑定中使用 ngModel 指令,必须先导入 FormsModule 并将其添加到 NgModule 的 imports 列表中。...ng-bind 绑定 HTML 元素应用程序数据 ng-bind-html 绑定 HTML 元素的 innerHTML 应用程序数据,并移除 HTML 字符串中危险字符 ng-bind-template...HTML 控制器的值应用数据 ng-model-options 规定如何更新模型 ng-mousedown 规定按下鼠标按键时的行为 ng-mouseenter 规定鼠标指针穿过元素时的行为 ng-mouseleave...规定鼠标指针在指定的元素中移动时的行为 ng-mouseover 规定鼠标指针位于元素上方时的行为 ng-mouseup 规定当在元素上松开鼠标按钮时的行为 ng-non-bindable 规定元素或子元素不能绑定数据

    5.3K41

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

    四、Step by Step 4.1、表单简介 用来处理用户的输入,通过从视图中捕获用户的输入事件、验证用户输入的是否满足条件,从而创建出表单模型修改组件中的数据模型,达到获取用户输入数据的功能 模板驱动表单...响应式表单 建立表单 由组件隐式的创建表单控件实例 在组件类中进行显示的创建控件实例 表单验证 指令 函数 在表单数据发生变更时,模板驱动表单通过修改 ngModel 绑定数据模型来完成数据更新,...而响应式表单在表单数据发生变更时,FormControl 实例会返回一个新的数据模型,而不是直接修改原来的数据模型 4.2、模板驱动表单 通过使用表单的专属指令(例如 ngModel 进行双向数据绑定)...将数据值和一些对于用户的行为约束(某个字段必须填啊、某个字段长度超过了长度限制啊)绑定组件的模板中,从而完成与用户的交互 4.2.1、模板驱动表单的双向数据绑定 在根模块中引入 FormsModule...在数据验证失败的情况下,对于系统来说,表单是不允许提交的,因此可以将提交事件绑定表单的 ngSubmit 事件属性上,通过模板引用变量的形式,在提交按钮处进行数据有效性判断,当无效时,禁用表单的提交按钮

    18.9K20

    Angular系列教程-第四节

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

    2.8K50

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

    Angular支持数据绑定,这是一种协调模板部分与组件部分的机制。 添加绑定标记模板HTML告诉Angular如何连接双方。 如图所示,有四种形式的数据绑定语法。...当用户点击英雄的名字时,(click)事件绑定调用组件的selectHero方法。 双向数据绑定是一个重要的第四种形式,它使用ngModel指令将属性和事件绑定在一个符号中。..."> 在双向绑定中,与属性绑定一样,数据属性值将从组件输入输入框中。...用户的更改也会返回到组件,将属性重置为最新值,就像事件绑定一样。 Angular在每个JavaScript事件循环中处理所有数据绑定,从应用程序组件树的根所有子组件。 ?...实现双向数据绑定ngModel指令是一个属性指令的例子。 ngModel通过设置其显示值属性并响应更改事件来修改现有元素(通常是)的行为。

    7.9K30

    AngularDart 4.0 高级-结构指令 顶

    Angular不断检查可能会影响数据绑定的更改。 无论组件在做什么,它都会继续这样做。 虽然看不见,但组件及其所有后代组件都会占用资源。 性能和记忆负担可能很大,响应性可能会降低,用户什么也看不到。...NgFor和NgSwitch ...指令遵循相同的模式。 *ngFor内部详解 Angular以类似的方式将*ngFor转换为从星号(*)语法通过模板属性模板元素。...这些是两个NgFor输入属性的名称。 这就是指令如何得知列表是heroes,并且track-by功能是trackById。 当NgFor指令遍历列表时,它会设置并重置其自己的上下文对象的属性。...研究NgIf和NgFor的源代码是了解更多信息的好方法。 模板输入变量 模板输入变量是一个变量,其值可以在模板的单个实例中引用。 在这个例子中有几个这样的变量:hero,i和odd。..._viewContainer); myUnless属性 指令消费者期望将真/假条件绑定[myUnless]。

    16.1K20

    AngularDart4.0 英雄之旅-教程-05多组件 顶

    )]="hero.name" placeholder="name"> ''', 添加英雄属性 HeroDetailComponent模板绑定组件的英雄属性。...在此页面的后面,父AppComponent将通过将其selectedHero绑定HeroDetailComponent的hero属性来通知子HeroDetailComponent显示哪个英雄。...您必须将目标绑定属性声明为输入属性。 否则,Angular拒绝绑定并抛出一个错误。...它所做的就是通过其hero输入属性接收一个hero对象,然后绑定该属性模板上。 这是完整的HeroDetailComponent。...您学习了如何使组件接受输入。 您学会了在 directives列表中声明应用程序指令。 您学会了将父组件绑定子组件。 你的应用应该看起来像这个实例(查看源代码)。

    1.8K10

    Angular 显示英雄列表

    创建模拟(mock)英雄数据 你需要一些英雄数据以供显示。 最终,你会从远端的数据服务器获取它。...它会为列表中的每项数据复写它的宿主元素。 在这个例子中  就是 *ngFor 的宿主元素 heroes 就是来自 HeroesComponent 类的列表。...heroes.component.css 中的样式只会作用于 HeroesComponent,既不会影响组件外的 HTML,也不会影响其它组件中的 HTML。...添加 click 事件绑定 再往  元素上插入一句点击事件的绑定代码: heroes.component.html <li *ngFor="let hero of heroes" (click)...你使用 *ngFor 显示了一个列表。 你使用 *ngIf 来根据条件包含或排除了一段 HTML。 你可以用 class 绑定来切换 CSS 的样式类。

    4.4K70

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

    我们要将组件显示app里面: 启动项目**ng serve --open**就可以看到页面显示的是**hello-world works...@Inout()装饰器来接收数据,通过@Output装饰器来派发数据来达到双向数据流通 组件ts代码(代码来自angular中文网): export class SizerComponent {..."不显示" : "显示" }} Hello World NgFor(内置): 给组件ts添加属性: public list: Array...="text" [(ngModel)]="value"> value: {{value}} 注意需要在module中导入FormsModule,要不然功能无法实现 此时页面恢复正常,通过在输入框中更新内容...,页面绑定数据同时更新 管道 angular中的管道与Vue中的过滤器雷同,均可以使数据按指定的格式进行显示,同样使用管道符来操作 内置管道: 演示: 将时间格式化为统一样式 DatePipe

    1.9K20
    领券