首页
学习
活动
专区
工具
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.5K30

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

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

30K20
  • 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时才采取行动。 有一个更简单的方法:绑定到Angular的keyup.enter伪事件。...这些技术对于小型演示很有用,但是在处理大量的用户输入时会很快变得冗长和笨拙。 双向数据绑定是在数据输入字段和模型属性之间移动值的更优雅和紧凑的方式。

    3.5K00

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

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

    3K30

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

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

    15.3K30

    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属性的值,并将这些值插入到浏览器中。...元素中的* ngFor是Angular“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.3K20

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

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

    7.9K30

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

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

    11K30

    AngularDart 4.0 高级-结构指令 顶

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

    16.1K20

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

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

    17.6K30

    AngularDart 4.0 高级-生命周期钩子 顶

    ngOnInit 在Angular首次显示数据绑定属性并设置指令/组件的输入属性后,初始化指令/组件。 在第一次ngOnChanges之后调用一次。...ngAfterContentInit 在Angular将外部内容投影到组件的视图之后进行响应。 在第一次NgDoCheck之后调用一次。 组件独有的钩子。...此示例将SpyDirective应用于由父SpyComponent管理的ngFor英雄迭代器中的。...构造函数不应仅仅将初始局部变量设置为简单值。 ngOnInit是组件获取其初始数据的好地方。 教程和HTTP章节显示了如何。 还要记住,指令的数据绑定输入属性在构建之后才会设置。...AfterContent AfterContent示例探索在Angular将外部内容投影到组件后的Angular调用的AfterContentInit和AfterContentChecked挂钩。

    6.2K10
    领券