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

如何通过多个输入angular2向数组提交新对象

在Angular 2中,可以通过多个输入向数组提交新对象。以下是一种实现方法:

  1. 首先,在组件的HTML模板中,使用Angular的双向绑定语法,将输入框与组件中的属性绑定起来。例如,如果要输入一个新的对象的名称和描述,可以使用两个输入框分别绑定到组件的name和description属性:
代码语言:txt
复制
<input [(ngModel)]="name" placeholder="名称">
<input [(ngModel)]="description" placeholder="描述">
<button (click)="addNewObject()">提交</button>
  1. 在组件的类中,定义一个数组来存储提交的对象。同时,实现一个方法addNewObject()来处理提交操作。在该方法中,创建一个新的对象,并将输入框中的值赋给该对象的属性。然后,将该对象添加到数组中:
代码语言:txt
复制
export class YourComponent {
  objects: any[] = [];
  name: string;
  description: string;

  addNewObject() {
    const newObject = {
      name: this.name,
      description: this.description
    };
    this.objects.push(newObject);
    // 清空输入框
    this.name = '';
    this.description = '';
  }
}
  1. 现在,每当用户在输入框中输入名称和描述,并点击提交按钮时,addNewObject()方法会被调用。该方法会创建一个新的对象,并将其添加到objects数组中。同时,输入框中的值会被清空,以便用户输入下一个对象的信息。

这样,通过多个输入向数组提交新对象的功能就实现了。你可以根据实际需求对该方法进行扩展,例如添加输入验证、对提交的对象进行处理等。

关于Angular 2的更多信息,你可以参考腾讯云的Angular产品介绍页面:Angular产品介绍

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

相关·内容

Angular的12个经典问题,看看你能答对几个?(文末附带Angular测试)

在成功匹配时,它会应用重定向,此时路由器会构建ActivatedRoute对象的树,同时包含路由器的当前状态。在重定向之前,路由器将通过运行保护(CanActivate)来检查是否允许的状态。...在Angular2中,组件中发生的任何改变总是从当前组件传播到其所有子组件中。如果一个子组件的更改需要反映到其父组件的层次结构中,我们可以通过使用事件发射器api来发出事件。...延迟加载通过将代码拆分成多个包并以按需加载的方式,来加速应用程序初始加载过程。 每个Angular应用程序必须有一个叫AppModule的主模块。...在某些情况下,我们需要通过现有类型提供一些更多的属性来扩展现有类型,或者如果我们需要定义其它类型以避免TypeScript警告。...总的来说,这些的标签和API被称为Web组件。Shadow DOM通过提供了更好的关注分离,通过其它的HTML DOM元素实现了更少的样式与脚本的冲突。

17.3K80
  • AngularJS2.0 教程系列(一)

    快速变化的WEB 在语言方面,ECMAScript6的标准已经完成,这意味着浏览器将很快支持例如模块、类、lambda表达式、 generator等的特性,而这些特性将显著地改变JavaScript的开发体验...初识Angular2 写一个Angular2的Hello World应用相当简单,分三步走: 1....引入Angular2预定义类型 import {Component,View,bootstrap} from "angular2/angular2"; import是ES6的关键字,用来从模块中引入类型定义...@Component最重要的作用是通过selector属性(值为CSS选择符),指定这个组件渲染到哪个DOM对象上。 @View最重要的作用是通过template属性,指定渲染的模板。 3....据称,注解的功能就是Angular2团队traceur团队提出的,这不是traceur的默认选项, 因此你看到,我们配置systemjs在使用traceur模块时打开注解: System.config

    2.4K10

    Angular2 VS Angular4 深度对比:特性、性能

    对于成熟的开发人员来说,有以上两种选择是一件很棒的事情;但是,对于处于学习阶段的晋开发人员来说,可能有点不知如何选择。...接下来一起了解Angular2这个版本发布的原因以及如何将其添加到Web开发中。 ...通过在DI库中提供基本信息(可以调用函数或创建类的实例来检查相关元数据),从而简化了对象实例的构建。通过提供注入注释,使得参数信息重写也变得简单。...动态载入: 这是之前的Angular版本均不具备的功能,Angular2包含了这个功能,即使在开发人员忙碌时,也能够添加的指令或控件。 模板: 在Angular2中,模板编译过程是异步的。...Screen Activator: 通过Angular 2,开发人员可以通过一系列can *回调对导航生命周期进行更好的控制。 canActivate:它允许或阻止导航到的控件。

    8.7K20

    实战 | Change Detection And Batch Update

    那么这里就有两个很重要的问题了:当数据变化时,这些框架/库是如何感知到的?当我们连续更新数据时,这些框架/库如何避免连续更新DOM,而是进行批量更新?...React Virtual DOM React在更新UI的时候会根据新老state生成两份虚拟DOM,所谓的虚拟DOM其实就是JavaScript对象,然后在根据特定的diff算法比较这两个对象,找出不同的部分...那么React是如何知道数据变化了呢?我们通过手动调用setState告知React我们需要更新的数据。...Angular1 Dirty Checking Angular1通过脏值检测去更新UI,所谓的脏值检测其实指Angular1从$rootScope开始遍历所有scope的$$watchers数组通过比较新老值来决定是否更新...Angular2可以适配任意情况,但是是通过篡改了原生方法实现的。Vue则通过ES5特性和JavaScript单线程的特性进行批量更新,无需特殊处理,可以满足任何情况。

    3.2K20

    Vuejs和其他前端框架的对比

    当有变化产生时,一个的Virtual DOM对象会被创建并计算新旧Virtual DOM之间的差别。之后这些差别会应用在真实的DOM上。...{ type: 'li', props: {}, children: ['item 2'] } ] } 真实的Virtual DOM会比上面的例子更复杂,但它本质上是一个嵌套着数组的原生对象...当一项被加进去这个JavaScript对象时,一个函数会计算新旧Virtual DOM之间的差异并反应在真实的DOM上。计算差异的算法是高性能框架的秘密所在,React和Vue在实现上有点不同。...因此,通过把原有的模板整合成的Vue模板,Vue很容易提供旧的应用的升级。这也让新来者很容易适应它的语法。...测试Angular2一开始就设计好了如何对组件进行测试,而Vue组件虽然也很好写测试,但是没有官方推荐的唯一标准(当然,对视图是否需要测试还有待探讨)。

    3.8K110

    vue.js与其他前端框架的对比

    当有变化产生时,一个的Virtual DOM对象会被创建并计算新旧Virtual DOM之间的差别。之后这些差别会应用在真实的DOM上。...{ type: 'li', props: {}, children: ['item 2'] } ] } 真实的Virtual DOM会比上面的例子更复杂,但它本质上是一个嵌套着数组的原生对象...当一项被加进去这个JavaScript对象时,一个函数会计算新旧Virtual DOM之间的差异并反应在真实的DOM上。计算差异的算法是高性能框架的秘密所在,React和Vue在实现上有点不同。...因此,通过把原有的模板整合成的Vue模板,Vue很容易提供旧的应用的升级。这也让新来者很容易适应它的语法。...测试Angular2一开始就设计好了如何对组件进行测试,而Vue组件虽然也很好写测试,但是没有官方推荐的唯一标准(当然,对视图是否需要测试还有待探讨)。

    4.1K80

    Change Detection And Batch Update

    那么这里就有两个很重要的问题了:当数据变化时,这些框架/库是如何感知到的?当我们连续更新数据时,这些框架/库如何避免连续更新DOM,而是进行批量更新?...React在更新UI的时候会根据新老state生成两份虚拟DOM,所谓的虚拟DOM其实就是JavaScript对象,然后在根据特定的diff算法比较这两个对象,找出不同的部分,最后根据改变的那部分进行对应...那么React是如何知道数据变化了呢?我们通过手动调用setState告知React我们需要更新的数据。...Angular1通过脏值检测去更新UI,所谓的脏值检测其实指Angular1从$rootScope开始遍历所有scope的$$watchers数组通过比较新老值来决定是否更新DOM。...Angular2可以适配任意情况,但是是通过篡改了原生方法实现的。Vue则通过ES5特性和JavaScript单线程的特性进行批量更新,无需特殊处理,可以满足任何情况。

    3.3K40

    Change Detection And Batch Update

    那么这里就有两个很重要的问题了:当数据变化时,这些框架/库是如何感知到的?当我们连续更新数据时,这些框架/库如何避免连续更新DOM,而是进行批量更新?...React在更新UI的时候会根据新老state生成两份虚拟DOM,所谓的虚拟DOM其实就是JavaScript对象,然后在根据特定的diff算法比较这两个对象,找出不同的部分,最后根据改变的那部分进行对应...那么React是如何知道数据变化了呢?我们通过手动调用setState告知React我们需要更新的数据。...Angular1通过脏值检测去更新UI,所谓的脏值检测其实指Angular1从$rootScope开始遍历所有scope的$$watchers数组通过比较新老值来决定是否更新DOM。...Angular2可以适配任意情况,但是是通过篡改了原生方法实现的。Vue则通过ES5特性和JavaScript单线程的特性进行批量更新,无需特殊处理,可以满足任何情况。

    3.7K70

    Angular2 :从 beta 到 release4.0 版本升级总结

    /core' => '@angular/core' 'angular2/http' => '@angular/http' 'angular2/router' => '@angular/router'...// 表单相关的 'angular2/commom' => '@angular/forms' 三、新增NgModule 官方说明 Angular 模块能帮你把应用组织成多个内聚的功能块。...@NgModule 接收一个元数据对象,该对象告诉 Angular 如何编译和运行模块代码。 它标记出该模块拥有的组件、指令和管道, 并把它们的一部分公开出去,以便外部组件使用它们。.../$$_gendir/app/app.module.ngfactory’ #4551) PS:运行代码可通过:即时JIT编译器动态引导、使用预编译器( AoT - Ahead-Of-Time )两种方式...= 'detail';//查看、编辑、添加 ... // 其余代码 } ... // 其余代码 代码: import { ActivatedRoute } from '@angular

    8.1K00

    腾讯前端必会面试题合集

    数组尾部操作的方法 pop() 和 push(),push 方法可以传入多个参数。...这种通过 通过原型链接的逐级向上的查找链被称为原型链什么是原型继承?一个对象可以使用另外一个对象的属性或者方法,就称之为继承。...如何判断一个对象是不是空对象?...,先来看一下DNS的解析域名过程,在浏览器输入的解析过程如下:(1) 检查浏览器缓存(2)检查操作系统缓存,常见的如hosts文件(3)检查路由器缓存(4)如果前几步都没没找到,会ISP(网络服务提供商....com的地址接着顶级域名服务器发送请求,然后会返回次级域名(SLD)服务器的地址,本例子会返回.test的地址接着次级域名服务器发送请求,然后会返回通过域名查询到的目标IP,本例子会返回www.test.com

    38720

    angular基础面试题_java web面试题

    @NgModule() 装饰器是一个函数,它接受一个元数据对象,该对象的属性用来描述这个模块。...angular 生命周期的顺序 ngOnChanges: Angular 设置或重新设置数据绑定的输入属性时响应。...在 ngOnInit() 之前以及所绑定的一个或多个输入属性的值发生变化时都会调用 ngOnInit: 在 Angular 第一次显示数据绑定和设置指令/组件的输入属性之后,初始化指令/组件。...当浏览器接受到可以被angular context(当事件触发,调用apply进入angular context)处理的事件时,就会触发digest循环,它会遍历每一个watch检查其属性和值是否发生改变,如果改变则用值覆盖旧值...灵活的路由,具备延迟加载功能 更容易学习 angular1是全局监听,变量越多性能越差,angular2采用模块化监听,提升了性能 在Angular 2应用中,我们应该注意哪些安全威胁?

    13K50

    Angular2 之 Animations

    Angular2的动画系统赋予了制作各种动画效果的能力,致力于构建出与原生CSS动画性能相同的动画。 Angular2的动画主要是和@Component结合在了一起。...缓动函数 缓动函数用于控制动画在运行期间如何加速和减速。比如:使用ease-in。 ·函数意味着动画开始时相对缓慢,然后在进行中逐步加速。...可以通过在这个字符串中的持续时间和延迟后面添加第三个值来控制使用哪个缓动函数(如果没有定义延迟就作为第二个值)。...通过定义动画的关键帧,可以把两组样式之间的简单转场,升级成一种更复杂的动画,它会在转场期间经历一个或多个中间样式。 每个关键帧都可以被指定一个偏移量,用来定义该关键帧将被用在动画期间的哪个时间点。...偏移量是一个介于0(表示动画起点)和1(表示动画终点)之间的数组。 ?

    1.9K10

    TypeScript入门教程(一)

    如何安装配置TypeScript 4, 快速构建一个小demo 一....,更容易组织代码开发大型复杂程序; (5) Angular2 就是使用 TypeScript 编写的; 三.安装TypeScript 3.1 安装TypeScript 在官网中可以看到,有两种主要的方式来获取...TypeScript工具: --通过npm(Node.js包管理器) --安装Visual Studio的TypeScript插件 这里通过npm来全局安装TypeScript,执行命令: npm install...另外,tsc还可以支持一次编译多个文件,或者编译文件夹下的所有文件: 一次编译多个文件: tsc 文件1 文件2 编译文件夹下所有ts文件: tsc *.ts 还可以监听文件的变化,使用--watch:...小结 本文作为typescript入门文章的第一节,主要介绍了typescript的优点、如何安装、如何在webpack中配置,并构建了一个小demo作为说明。如有问题,欢迎指正。

    5.6K550

    干货 | 前端阶段性总结之「框架相关」那些事

    不只是Angular1到Angular2的重新设计,甚至是Angular2自身的更新也不全兼容。但不得不说,虽然对用户不是非常友好,其实仔细品味的话,Angular有很多很棒的理念和设计的。...这也是一个比较有意思的概念吧,大家可以参考《深度剖析:如何实现一个 Virtual DOM 算法》。...虚拟DOM,本质上是在JS和DOM之间做了个缓存: 用js对象结构表示DOM树结构,并构建真正DOM树 状态变更时,重新构建DOM树,记录新旧的差异 将差异应用到原有DOM树上 当然,React和...大家一致性通过或者协商后的方案,才是最适合的方案。 到后面更多的是维护成本,这个时候需要做些整理和抽象,这时候规范的重要性就随着项目的壮大、成员的增加愈发地体现出来了。...一般来说,路由都是通过history API进行监听和读写,具体大家可以看看这篇《Web开发中 前端路由 实现的几种方式和适用场景》。

    95820

    Java 中文官方教程 2022 版(三十五)

    然而,在几乎所有情况下,语句在执行后立即完成,因此提交。) 允许将两个或多个语句分组为一个事务的方法是禁用自动提交模式。...例如,想象一下,一个员工应该在COFFEES表中输入的咖啡价格,但推迟了几天才这样做。与此同时,价格上涨了,今天所有者正在尝试输入更高的价格。...当仓库员工使用 GUI 工具输入数据时,该工具将每个条目添加到一个数组中,CachedRowSet对象将使用该数组在后台执行更新。完成库存后,PDA 将其数据发送回总部,数据将上传到主服务器。...可以通过将每个参数数组而不是单个值来使其适用于两个或更多列。...使用的Predicate对象设置 FilteredRowSet 对象以进一步过滤数据 您可以串行设置多个过滤器。

    21000

    前端打工人的面试总结

    (2)缓存判断: 浏览器会判断所请求的资源是否在缓存里,如果请求的资源在缓存里并且没有失效,那么就直接使用,否则服务器发起的请求。...new操作符的实现原理new操作符的执行过程:(1)首先创建了一个的空对象(2)设置原型,将对象的原型设置为函数的 prototype 对象。...(3)让函数的 this 指向这个对象,执行构造函数的代码(为这个对象添加属性)(4)判断函数的返回值类型,如果是值类型,返回创建的对象。如果是引用类型,就返回这个引用类型的对象。...如何判断一个对象是否属于某个类?第一种方式,使用 instanceof 运算符来判断构造函数的 prototype 属性是否出现在对象的原型链中的任何位置。...数组尾部操作的方法 pop() 和 push(),push 方法可以传入多个参数。

    63080

    JSP 四讲

    第二个构造方法使用File对象创建FileOutputStream对象。参数name和file指定的文件称做输出流的目的地,通过输出流中写入数据把信息传递到目的地。...Writer类中 常用方法: l  void write(int n):  输入流写入一个字符。 l  void write(byte b[]):  输入流写入一个字符数组。...第二个构造方法使用File对象创建FileWriter对象。参数name和file指定的文件称做输出流的目的地,通过输出流中写入数据把信息传递到目的地。...在下面的例子中我们通过输入输出流技术获取文件的内容,即去掉表单的信息。 首先,我们将客户提交的全部信息保存为一个临时文件,该文件的名字是客户的session对象的Id,不同客户的这个Id是不同的。...可以借助session对象实现分页读取文件。当客户JSP页面发出请求时,JSP页面建立一个指向该文件的输入流,通过文件流每次读取文件的若干行。 我们已经知道HTTP协议是一种无状态协议。

    1.1K30

    一个合格的初级前端工程师需要掌握的模块笔记

    >、等元素新增属性 formenctype 规定在发送到服务器之前应该如何对表单数据进行编码 formtarget 带有两个提交按钮的表单,会提交到不同的目标窗口 multiple...indexOf 数组可以通过indexOf()来搜索一个指定的元素的位置,如未找到返回 -1 concat concat()方法把当前的 数组 和 另一个 数组连接起来,并返回一个数组 var newArr...alias (译:别名)通过别名将原来导入路径映射成一个的导入路径 extensions (译:扩展)数组 导入模块时,可以省略的文件后缀名 resolve: { alias: {...), concat() 和 slice() 非变异方法,不触发视图更新 它们可以返回数组,用数组替换旧数组,就可以刷新视图 事件对象 event.type 触发的事件类型 event.target...) replace( ):跳转到指定路由,它不会 history 添加记录,而是替换掉当前的 history 记录。

    3.6K10
    领券