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

将输入字段绑定到ngFor循环中的按钮| Angular 2+

是指在Angular 2+中,如何将输入字段与ngFor指令结合使用,使得每个循环项都有一个对应的输入字段。

在Angular中,可以通过使用ngModel指令和ngFor指令来实现这个功能。具体步骤如下:

  1. 在组件的模板文件中,使用ngFor指令来循环遍历一个数组或对象,并为每个循环项创建一个输入字段。例如:
代码语言:txt
复制
<div *ngFor="let item of items">
  <input [(ngModel)]="item.value" type="text">
  <button (click)="saveItem(item)">保存</button>
</div>
  1. 在组件的类文件中,定义一个items数组,并初始化它的值。例如:
代码语言:txt
复制
export class MyComponent {
  items: any[] = [
    { value: 'Item 1' },
    { value: 'Item 2' },
    { value: 'Item 3' }
  ];

  saveItem(item: any) {
    // 保存item的逻辑
  }
}

在上面的代码中,我们使用ngFor指令循环遍历items数组,并为每个循环项创建一个输入字段。通过使用ngModel指令,我们将输入字段与每个循环项的value属性进行双向绑定,这样在输入字段中输入的值会自动更新到对应的循环项中。

另外,我们还为每个循环项创建了一个保存按钮,并绑定了一个saveItem方法。当点击保存按钮时,会调用saveItem方法,可以在该方法中实现保存循环项的逻辑。

这种方式适用于需要为每个循环项提供一个独立的输入字段,并且需要将输入字段的值与循环项进行关联的场景,例如表单中的多个输入字段需要与不同的数据项进行关联。

对于这个问题,腾讯云提供的相关产品是腾讯云云开发(Tencent Cloud Base,TCB)。腾讯云云开发是一款无服务器的云原生后端云服务,提供了前端开发、后端开发、数据库、存储等一体化的解决方案。您可以使用腾讯云云开发来快速构建和部署应用程序,无需关心服务器运维和基础设施的搭建。

腾讯云云开发提供了云函数(Cloud Function)的功能,您可以在云函数中编写后端逻辑代码,并通过API网关(API Gateway)将前端和后端进行连接。在这个问题中,您可以将保存循环项的逻辑代码放在云函数中,并通过API网关来触发该云函数。

您可以通过访问腾讯云云开发的官方网站了解更多关于腾讯云云开发的信息:腾讯云云开发官方网站

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

相关·内容

AngularDart4.0 指南- 表单 顶

一路上你学习如何: 用组件和模板构建一个Angular表单。 使用ngModel创建读取和写入输入控制值双向数据绑定。 跟踪状态变化和表单控件有效性。...使用ngModel双向数据绑定语法数据属性绑定每个表单控件。 为每个表单输入控件添加一个ngControl指令。 添加自定义CSS来提供视觉反馈。 显示和隐藏验证错误消息。...顺便说一句,您可以注入数据服务来获取和保存真实数据,或者这些属性作为输入和输出(请参阅“模板语法”页面中输入和输出属性)来绑定父组件。 这不是现在问题,这些未来变化不会影响表单。...您将在表单中添加一个select,并使用ngFor(先前在“显示数据”页面中看到一种技术)选项绑定powers列表。...您将通过heroForm变量表单整体有效性绑定按钮disabled属性: <button [disabled]="!

17.4K30

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

他们在输入框中输入文字。 他们从列表中选择项目。 他们点击按钮。 这样用户操作可能导致数据流向相反方向:从元素组件。 了解用户操作唯一方法是侦听某些事件,例如按键,鼠标移动,点击和触摸。...要监听值更改,代码会绑定输入输入事件。 当用户进行更改时,引发输入事件,绑定在包含DOM事件对象$event上下文中执行语句。...当用户单击按钮时,Angular$event值分配给AppComponent.fontSizePx。 显然,与单独属性和事件绑定相比,双向绑定语法相当方便。...模板输入变量 hero之前let关键字创建一个名为hero模板输入变量。 ngFor指令迭代由父组件heroes属性返回heroes,并在每次迭代期间hero设置为列表中的当前项目。...电话按钮点击处理程序输入值传递给组件callPhone方法。但是一个指令可以改变这种行为,并将其值设置为别的东西,比如本身。 NgForm指令这样做。 以下是Forms指南中表单示例简化版本。

29.9K20

Angular 6.x 基础教程

,若我们改变绑定表达式为 (click)="onClick(myInput)" ,当我们点击按钮时,控制台输出结果是: 通过该输出结果,我们可以知道 #variableName...指令 在 Angular 中我们可以使用 ngFor 指令来显示数组中每一项信息。...第七节 - 使用 Input 装饰器 为了让我们能够开发更灵活组件,Angular 为我们提供了 Input 装饰器,用于定义组件输入属性。...第九节 - 使用 Output 装饰器 Output 装饰器作用是用来实现子组件信息,通过事件形式通知父级组件。...当在 SimpleFormComponent 组件中修改 input 输入文本消息后,点击更新按钮,将会调用 AppComponent 组件类中 onUpdate() 方法,更新对应信息。

15.6K20

AngularDart4.0 指南- 用户输入

用户操作,如点击链接,按下按钮输入文字引发DOM事件。 本页说明如何使用Angular事件绑定语法这些事件绑定组件事件处理程序。 运行实例(查看源代码)。...绑定用户输入事件 您可以使用Angular事件绑定来响应任何DOM事件。 许多DOM事件由用户输入触发。 绑定这些事件提供了从用户获得输入方法。...; } 当用户点击按钮时,Angular从ClickMeComponent调用onClickMe()方法。 通过事件对象获取用户输入 DOM事件携带可能对组件有用信息有效载荷。...减少噪音一种方法是检查每个$ event.keyCode,并且只有当输入键是enter时才采取行动。 有一个更简单方法:绑定Angularkeyup.enter伪事件。...这些技术对于小型演示很有用,但是在处理大量用户输入时会很快变得冗长和笨拙。 双向数据绑定是在数据输入字段和模型属性之间移动值更优雅和紧凑方式。

3.4K00

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

应用hero字段 hero字段替换为AppComponent中公共heros字段,并使用模拟英雄进行初始化(不要忘记导入):lib/app_component.dart (heroes) import...-- each hero goes here --> 下一步你添加英雄名字 使用ngFor指令罗列英雄 目标是组件中英雄列表绑定模板,迭代它们,并单独显示它们。...ngFor指令遍历组件英雄列表并为该列表中每个英雄呈现该模板一个实例。 表达式部分hero标识为模板输入变量,其中包含每个迭代英雄详情。...接下来,您将通过selectedHero组件属性主链接到详细信息,该属性绑定单击事件。...在用户输入页面和模板语法页面的事件绑定部分了解有关事件绑定更多信息。 添加一个点击处理程序来显示选定英雄  你不再需要hero属性,因为你不再显示一个英雄; 你正在显示一个英雄列表。

3K30

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

1、如何使用第三方库,安装-引用(主要参考官方文档) 2、{{}}指令,单向绑定数据,声明数据-绑定数据 3、[(ngModel)]指令,双向绑定数据,声明数据-绑定数据 4、*ngFor指令,循环渲染...安装及引用 安装 npm install angular-weui --save 安装后还需要引用weui 样式以及我们font-awesome图标苦,在我们项目index.html中引用 <!...,记账类型选择按钮 <a href="javascript:;" class="weui-grid" *ngFor="let b of...我选择固定中间按钮,使用动态绑定样式让中间部分高度等于页面高度-底部和顶部高度,设置overflo为scroll; 在accounting.component.ts中添加样式数据如下: contentStyle

2.2K20

Angular快速学习笔记(3) -- 组件与模板

显示数据 在 Angular 中最典型数据显示方式,就是把 HTML 模板中控件绑定 Angular 组件属性。...绑定语法 数据绑定是一种机制,用来协调用户所见和应用数据。绑定类型可以根据数据流方向分成三类: 从数据源视图、从视图数据源以及双向从视图数据源再到视图。...事件绑定 可以通过 Angular 事件绑定来声明对哪些用户动作感兴趣 圆括号中名称 —— 比如 (click) —— 标记出目标事件。在下面例子中,目标是按钮 click 事件。...当它通过事件绑定形式被绑定时,值会“流出”这个属性。 你只能通过它输入和输出属性将其绑定其它组件。...ngOnInit() 在 Angular 第一次显示数据绑定和设置指令/组件输入属性之后,初始化指令/组件。

15.2K30

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

从入坑弃坑 - Angular 使用入门 Angular 从入坑挖坑 - 组件食用指南 Angular 从入坑挖坑 - 表单控件概览 三、Knowledge Graph ?...四、Step by Step 4.1、表单简介 用来处理用户输入,通过从视图中捕获用户输入事件、验证用户输入是否满足条件,从而创建出表单模型修改组件中数据模型,达到获取用户输入数据功能 模板驱动表单...数据值和一些对于用户行为约束(某个字段必须填啊、某个字段长度超过了长度限制啊)绑定组件模板中,从而完成与用户交互 4.2.1、模板驱动表单双向数据绑定 在根模块中引入 FormsModule...在数据验证失败情况下,对于系统来说,表单是不允许提交,因此可以提交事件绑定表单 ngSubmit 事件属性上,通过模板引用变量形式,在提交按钮处进行数据有效性判断,当无效时,禁用表单提交按钮...FormGroup 实例属性通过 formGroup 指令绑定 form 元素,然后控件组每一个属性通过 formControlName 绑定具体对应表单控件上 <form [formGroup

18.9K20

AngularDart4.0 指南- 显示数据 顶

您可以通过HTML模板中控件绑定Angular组件属性来显示数据。 在这个页面中,您将创建一个包含英雄列表组件。 您将显示英雄名单列表,并有条件地在列表下方显示一条消息。...> ''', Angular会自动从组件中抽取title和myHero属性值,并将这些值插入浏览器中。...元素中* ngForAngular“repeater”指令。...这是语法重要组成部分。 有关更多信息,请参阅模板语法页面。 注意ngFor指令中hero变量; 它是模板输入变量一个例子。...在“模板语法”页面的microsyntax部分阅读有关模板输入变量更多信息。 Angular为列表中每个项目复制,hero变量设置为当前迭代中项目(英雄)。

5.3K10

Angular快速学习笔记(2) -- 架构

指令告诉 Angular 在一个列表上进行迭代 {{hero.name}}、(click) 和 [hero]把程序数据绑定绑定回 DOM,以响应用户输入。...更多内容参见稍后数据绑定部分 模板中 标签是一个代表新组件 HeroDetailComponent 元素 1.2.3.1 数据绑定 Angular数据绑定标记四种形式... 在双向绑定中,数据属性值通过属性绑定从组件流到输入框。用户修改通过事件绑定流回组件,把属性值设置为最新值。...Angular 在每个 JavaScript 事件循环中处理所有的数据绑定,它会从组件树根部开始,递归处理全部子组件。 ?...它工作模型基于人们熟知浏览器导航约定: 在地址栏输入 URL,浏览器就会导航相应页面 在页面中点击链接,浏览器就会导航一个新页面 点击浏览器前进和后退按钮,浏览器就会在你浏览历史中向前或向后导航

5.2K20

AngularDart4.0 英雄之旅-教程-08HTTP 顶

现在是时候添加创建和删除英雄能力了。 更新英雄细节 尝试在英雄详情视图中编辑英雄名字。 当你输入时,英雄名字在视图标题中被更新。 但是,如果您单击后退按钮,更改丢失。 更新之前没有丢失。...添加保存英雄详情能力 在英雄细节模板末尾,添加一个保存按钮,其中包含一个点击事件绑定,调用一个名为save()新组件方法。...刷新浏览器,更改英雄名称,保存更改,然后单击浏览器“后退”按钮。 现在应该继续进行更改。 添加加入英雄能力 要添加英雄,应用程序需要英雄名字。 您可以使用与添加按钮配对输入元素。...,然后清除输入字段,以便为其他名称做好准备。...如果用户使用鼠标操作粘贴文本,则会触发更改事件绑定。 正如所料,* ngFor从组件英雄属性重复英雄对象。 但正如你很快就会看到,英雄财产现在是一个英雄列表流,而不仅仅是一个英雄名单。

11K30

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

添加绑定标记模板HTML告诉Angular如何连接双方。 如图所示,有四种形式数据绑定语法。 每个表单都有一个方向 - 从DOMDOM,或者在两个方向。...当用户点击英雄名字时,(click)事件绑定调用组件selectHero方法。 双向数据绑定是一个重要第四种形式,它使用ngModel指令属性和事件绑定在一个符号中。..."> 在双向绑定中,与属性绑定一样,数据属性值将从组件输入输入框中。...用户更改也会返回到组件,属性重置为最新值,就像事件绑定一样。 Angular在每个JavaScript事件循环中处理所有数据绑定,从应用程序组件树所有子组件。 ?...组件类应该是精益。 他们不从服务器获取数据,验证用户输入或直接登录到控制台。 他们这些任务委托给服务。 一个组件工作是启用用户体验,仅此而已。

7.9K30

AngularDart 4.0 高级-结构指令 顶

您将在本指南中学习星号(*)是一种便利符号,字符串是一种微型语法,而不是通常模板表达式。 Angular这个符号解析成一个围绕宿主元素及其后代标记。...*ngFor内部详解 Angular以类似的方式*ngFor转换为从星号(*)语法通过模板属性模板元素。...当你编写自己结构指令时,可以使用这些微观语法机制。 研究NgIf和NgFor源代码是了解更多信息好方法。 模板输入变量 模板输入变量是一个变量,其值可以在模板单个实例中引用。...您将尝试*ngFor和*ngIf放在同一宿主元素上。 Angular不会允许。 您仅可以一个结构指令应用于宿主元素。 原因是简单。 结构指令可以用宿主元素及其后代完成复杂事情。..._viewContainer); myUnless属性 指令消费者期望真/假条件绑定[myUnless]。

16K20

AngularDart4.0 英雄之旅-教程-07路由 顶

创建一个新DashboardComponent。 Dashboard绑定导航结构中。 路由是导航另一个名称。 路由是导航从视图视图机制。.../angular_router.dart'; import 'hero_service.dart'; RouteParams,HeroService和Location服务注入构造函数中,并将其值保存在私有字段中...您将使用绑定后退按钮事件连接此方法,您将添加到组件模板。...如本页“路由链接”部分所述,AppComponent模板中顶级导航路由器链接设置为目标路由,/dashboard 和/ heroes固定名称。 这次,您绑定包含链接参数列表表达式。...按钮点击事件绑定一个gotoDetail()方法,该方法应该通过告诉路由器去哪里命令性地导航。 这种方法需要对组件类进行以下更改: 导入angular_router。

17.5K30

Angular 6.x 表单快速入门

Driven 表单特点 使用方便 适用于简单场景 通过 [(ngModel)] 实现数据双向绑定 自动生成 Form Model (异步) 最小化组件类代码 不易于单元测试 Reactive 表单特点...比较灵活 适用于复杂场景 简化了HTML模板代码,把验证逻辑抽离组件类中 手动创建 Form Model (同步) 方便跟踪表单控件值变化 易于动态添加表单控件 易于单元测试 本文主要介绍...第一节 - 创建最简单输入框 如何实现双向绑定? 在 Angular 表单中,我们通过 ngModel 指令来实现双向绑定。...ngModelGroup 指令是 Angular 表单中提供另一特殊指令,可以对表单输入内容进行分组,方便我们在语义上区分不同性质输入。...AppComponent { username = 'semlinker'; onSubmit(value) { console.dir(value); } } 运行以上代码,点击提交按钮输出结果

4.6K20
领券