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

Angular 2:在ngModelChange函数中,如何比较ngModel的新旧值?

在Angular 2中,可以通过在ngModelChange函数中使用参数来比较ngModel的新旧值。ngModelChange是一个事件,当ngModel的值发生变化时触发。

在ngModelChange函数中,可以通过比较参数的值来判断ngModel的新旧值。参数的值即为ngModel的新值,可以将其与之前保存的旧值进行比较。

以下是一个示例代码:

代码语言:typescript
复制
import { Component } from '@angular/core';

@Component({
  selector: 'app-example',
  template: `
    <input [(ngModel)]="value" (ngModelChange)="onValueChange($event)">
  `
})
export class ExampleComponent {
  value: string;
  oldValue: string;

  onValueChange(newValue: string) {
    // 比较ngModel的新旧值
    if (newValue !== this.oldValue) {
      console.log('ngModel的值发生了变化');
    }

    // 更新旧值为新值
    this.oldValue = newValue;
  }
}

在上述示例中,ngModel绑定到了value属性,当ngModel的值发生变化时,会调用onValueChange函数。在onValueChange函数中,通过比较newValueoldValue来判断ngModel的新旧值是否相同。如果不相同,则表示ngModel的值发生了变化。

这是一个简单的示例,你可以根据实际需求进行更复杂的比较和处理。

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

相关·内容

Angular—都2019了,你还对双向数据绑定念念不忘

写法上略有不同,目的和实现效果却是一样,当js或ts文件name发生变化时,html模板会发生改变,反之,当用户input输入时候,js或ts文件name也会发生相应改变...Angular’双向数据绑定‘ 没有黑魔法 Angular努力拥抱web标准,不创造新名词,也不使用什么黑魔法,那么双向绑定是如何实现呢?事实上通过属性绑定和事件,这并不难做到。...不看源码情况下,如果是让你去实现 ngModel 这个指令,相信你肯定有思路。 肯定要把输入属性 ngModel 和input元素value关联起来。...2. input发生变化后需要使用 ngModelChange 把它发送出来,那ngModelChange肯定是一个EventEmitter。 3....子组件中被修改以后,angular帮助我们把 AppComponent 上name进行了修改。

4.3K30

Angular核心概念:数据绑定

比较运算:Y。逻辑运算:Y。三目运算:Y。 调用函数:Y。创建对象:N。JSON序列化:N。 NG表达式禁止出现new关键字。NG表达式JSON是undefined。...Angular指令分三类: 1.组件指令:NGComponent继承自Directive 2.结构型指令:会影响DOM树结构,必须使用开头,如ngFor,*ngIf 3.属性型指令:不会影响DOM...,处理函数名后必须有() (5)双向数据绑定指令:[(ngModel)]—重点 方向1:Model=》View,模型变则视图变,用[]绑定 方向2:View=》Model,视图(表单元素)变则模型变,...ngModel指令FormsModule模块,使用之前必须添加 app.module.ts主模块中导入模块 import {FormsModule} from'@angular/forms'...--Angular专用事件:“模型数据改变”ngModelChange-->> 当前用户绑定{{uname}} ts文件 改变打印控制台上 uname="dingding";

3.5K10

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

主要是因为前段时间写过一些关于Angualr相关实战文章,有些爱学习小伙伴对这方面比较感兴趣,但是又不知道该怎么入手(因为认识我大多数小伙伴都是后端同学),所以今天准备出一篇Angular学习资料汇总和日常开发中使用比较频繁语法总结...Angular 会把这个名字替换为响应组件属性字符串。..., "菜鸟教程3", "菜鸟教程4", ] }); Angular ng-if判断使用: //angular没有else只能都通过ng-if来判断 <p ng-if...HTML 元素 ng-href 为 the 元素指定链接 ng-if 如果条件为 false 移除 HTML 元素 ng-include 应用包含 HTML 文件 ng-init 定义应用初始化...将文本转换为列表 (数组) ng-model 绑定 HTML 控制器到应用数据 ng-model-options 规定如何更新模型 ng-mousedown 规定按下鼠标按键时行为 ng-mouseenter

5.3K41

浅谈 Checkbox Group 双向数据绑定

实际工作中发现很多组件库关于 checkbox-group 双向绑定一直很别扭,或者说多多少少都有一些瑕疵。 开始本文之前,我们先假定有如下需求: ? 数据列表和输出都是对象数组。...Ant Design checkbox-group 设计方案算是比较完善。...: boolean; } defaultValue: string[]; 2、Ant Design Angular实现: <nz-checkbox-group [(ngModel)]="options...另外,React 版和 Angular输出类型也是固定,其中 React 版输出是一个关于 value 字符串数组,Angular 版是则是一个双向绑定 checked 原数组(个人觉得...那到底应该怎样设计 checkbox-group 双向数据绑定才能更灵活使用呢? 如何设计 Checkbox Group 介绍如何设计之前,我们先尝试能否从其它组件设计中找到灵感。

2K10

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

如何从输入框中提取当前显示文本,以便更新数据属性? 谁想每一次都看看? 该ngModel指令隐藏了自己ngModel输入属性和ngModelChange输出属性背后这些繁重细节。...<input [ngModel]="currentHero.name" (ngModelChange)="currentHero.name=$event"> ngModel 数据属性设置元素属性...Angular为所有基本HTML表单元素提供访问器,Forms指南展示了如何绑定到它们。...对于这些小型转换来说,Angular 管道是一个很好选择。 管道是简单函数,它接受一个输入并返回一个转换后。...想象一下,诸如a.b.c.d这样长属性路径某个地方防止空Angular安全导航操作符(?.)是一种更为流畅和方便方法来防止属性路径中出现空。表达式达到第一个空时会被释放。

29.9K20

Angular 2 + 折腾记 :(7) 初步了解表单:模板驱动及数据驱动及脱坑要点

前言 表单在整个系统作用相当重要,这里主要扯下响应表单实现方式。...---- 模板驱动 模板驱动:主要是依赖[(ngModel)]和#scope_var以及原生表单控件属性(require,minlenght,maxlength等)来操作表单亦或者校验 一个最简单例子...--testform这个局部变量保存了表单所有相关信息--> <!...; Submit()函数内,点击提交时候对整个表单一一去判断,传统方式基本这样 每个控件输入时候对应去触发对应事件做校验,比如[ngModelChange]来处理双向绑定校验 ---- 数据驱动...(Reactive Form) 响应式表表单:原理是一开始就构建整个表单,表单通过特殊指令formControlName一一关联(类似ngModel); 相关名词: FormGroup: 用来追踪表单控件有效状态及

3.8K20

Angular2 组件(页面)之间如何

Angular 2,数据和事件变化检测从上到下发生从父级到子级。 Angular 2事件,我们可以使用DOM事件传递模型,其中事件从下到上从子到父。... 因此,当涉及可撤消事件传播时,Angular 2事件可以像普通HTML DOM事件一样对待。 @Input()装饰器定义了一组可以从父组件传递参数。...执行结果 @input + @output 绑定定义组件公共API。我们模板,我们使用 [方括号] 传递输入,使用(括号)来处理输出。 组件要点不仅是封装,而且是可重用性。...它接受组件向其父组件公开输出参数列表。 关于双向绑定 双向数据绑定使用ngModel指令将输入和输出绑定组合为单个符号。... //它幕后做相当于 要创建一个支持双向绑定组件

3.9K50

自定义 angular-datetime-picker 格式

最近一直都在使用 Angular 进行开发,维护项目。遇到了日期问题,同事采用是 @danielmoncada/angular-datetime-picker。...PS:当然,如果是新项目,还是建议使用框架集成日期功能,虽然功能可能不是你预期,但是起码够用。比如 ant design angular 版本。...比如: owl-date-time 属性有: 属性名称 类型 是否必要 默认 pickerType both, calendar, timer 可选 both yearOnly 布尔 可选 false...我们来讨论两点: 输入框显示 YYYY/MM/ HH:mm:ss 格式 翻译 - 更改按钮名称 Cancel => 取消,Set => 设置 目前默认是这样: 我们有相关 html 代码如下...然后我们 app.module.ts 上操作: import { OwlDateTimeIntl } from '@danielmoncada/angular-datetime-picker'; /

1.1K20

Angular 6.x 表单快速入门

比较灵活 适用于复杂场景 简化了HTML模板代码,把验证逻辑抽离到组件类 手动创建 Form Model (同步) 方便跟踪表单控件变化 易于动态添加表单控件 易于单元测试 本文主要介绍...第一节 - 创建最简单输入框 如何实现双向绑定? Angular 表单,我们通过 ngModel 指令来实现双向绑定。... Angular ,我们可以通过 #userName="ngModel" 方式获取 ngModel 对象,然后通过该对象 errors 属性,来获取对应验证规则 (如 required, minlength... Angular ,我们可以使用熟悉 标签来创建表单。...如何获取表单提交 Angular ,我们可以通过 #loginForm="ngForm" 方式获取 ngForm 对象,然后通过 loginForm.value 来获取表单

4.6K20

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

文章目录 前文回顾 基本语法 常见指令 NgModel NgFor NgIf Ng-container 管道 前文回顾 前面已经写了关于angular项目的基本介绍和如何创建一个angular项目,这一篇主要梳理一些...angular基本语法,这样有利于后面我们进行梳理别的知识点做一些铺垫 基本语法 常见指令 NgModel NgModel就和vuev-model效果是一致,只是写法会有一些区别,vue是可以直接进行使用...,但是angular我们引入框架一个核心模块FormsModule才可以,该指令就是将数据驱动视图改变!...-- 使用{{}}进行数据获取 --> {{inputData}} 运行效果 NgFor NgFor和我们jsfor循环渲染数据是一致,所以这里是比较容易理解,简单演示一下...官方的话:为没有 DOM 元素指令安排宿主 管道 管道其实就是具有一定功能函数,主要是一些场景是对字符串什么进行简单转化,当然我们也可以自己使用自定义函数进行数据转换,只是angular给我们提供了一些初始化功能函数管道详细列表

2.5K30

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

一、Overview angular 入坑记录笔记第三篇,介绍 angular 中表单控件相关概念,了解如何angular 创建一个表单,以及如何针对表单控件进行数据校验。...响应式表单 建立表单 由组件隐式创建表单控件实例 组件类中进行显示创建控件实例 表单验证 指令 函数 表单数据发生变更时,模板驱动表单通过修改 ngModel 绑定数据模型来完成数据更新,...将数据和一些对于用户行为约束(某个字段必须填啊、某个字段长度超过了长度限制啊)绑定到组件模板,从而完成与用户交互 4.2.1、模板驱动表单双向数据绑定 根模块引入 FormsModule...使用 ngModel 进行模板绑定时,angular form 标签上自动附加了一个 NgForm 指令,因为 NgForm 指令会控制表单带有 ngModel 指令和 name 属性元素,而...同模板驱动表单数据有效性验证相同,响应式表单同样可以使用原生表单验证器,设定规则时,需要将模板控件名对应数据第二个参数改为验证规则 响应式表单,数据源来源于组件类,因此应该在组件类中直接把验证器函数添加到对应

18.9K20

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

自定义组件与原生HTML相同布局无缝混合。 元数据 ? 元数据告诉Angular如何处理一个类。 回顾HeroListComponent代码,你可以看到它只是一个类。..."> 双向绑定,与属性绑定一样,数据属性将从组件输入到输入框。...Dart,唯一为true是布尔true; 所有其他是错误。 JavaScript和TypeScript相反,将诸如1和大多数非空对象视为true。...如果请求服务实例不在容器,那么将服务返回给Angular之前,注入器将创建一个并将其添加到容器。 当所有请求服务已经解析并返回时,Angular可以用这些服务作为参数调用组件构造函数。...提供者是可以创建或返回服务东西,通常是服务类本身。 无论应用程序组件树级别如何,您都可以引导期间或组件中注册提供程序。

7.9K30

AngularDart4.0 英雄之旅-教程-03英雄编辑器

', 刷新浏览器,页面将显示标题和英雄名 双大括号是Angular绑定语法。 这些插绑定将组件标题和英雄属性作为字符串显示HTML标题标签内。...“显示数据”页面阅读有关插更多信息。 Hero对象 英雄需要更多属性。 将英雄从文字字符串转换为类。 创建一个具有id和name属性Hero类。...数据两个方向流动:从属性到文本框,从文本框返回到属性。 表单和模板语法页面阅读有关ngModel更多信息。 @Component(指令:...)...[(ngModel)]="hero.name" ^^^^^^^^^^^^^^^^^^^^^^^ 虽然NgModelangular_forms库定义有效Angular指令,但默认情况下不可用。...模板中使用任何Angular指令之前,需要在组件@Component注解指令参数列出它们。

3.2K10

AngularDart4.0 指南- 表单 顶

一路上你将学习如何: 用组件和模板构建一个Angular表单。 使用ngModel创建读取和写入输入控制双向数据绑定。 跟踪状态变化和表单控件有效性。...模板驱动形式 您可以通过使用本页描述特定于表单指令和技术Angular模板语法编写模板来构建表单。 您也可以使用响应式(或模型驱动)方法来构建表单。...p模板输入变量每次迭代是不同power; 您使用插语法显示其名称。 与ngModel双向数据绑定 现在运行应用程序有点令人失望。 ? 你没有看到英雄数据,因为你还没有绑定到英雄。...指令exportAs属性告诉Angular如何将引用变量链接到指令。 您将name设置为“ngForm”,因为ngModel指令exportAs属性是“ngForm”。...如果没有Angular帮助,你需要做什么才能将按钮启用/禁用状态连接到表单有效性? 对你来说,这很简单: (增强)表单元素上定义一个模板引用变量。 多处按钮引用该变量。

17.4K30

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

一、Overview angular 入坑记录笔记第二篇,介绍组件相关概念,以及如何angular 通过使用组件来完成系统功能实现 对应官方文档地址: 显示数据 模板语法 用户输入 组件之间交互...组件类,通过使用 @Component 装饰器 1 用来将类声明为组件类,并为这个组件类配置一些元数据 2,以决定该组件在运行期间该如何处理、实例化和使用 装饰器存在三个基础配置参数,用来完成组件与视图之间关联...,可以通过 angular 内置模板语法与 html 元素进行结合,从而告诉 angular 如何根据我们应用逻辑和数据来渲染页面 4.1.2.1、插表达式 插表达式可以将组件属性或者是模板上数据通过模板表达式运算符进行计算...父组件内容: 3、通过服务属性中共享数据 修改服务数据 <button...五、组件生命周期钩子函数angular 创建、更新、销毁组件时都会触发组件生命周期钩子函数,通过组件实现这些生命周期函数,从而介入到这些关键时刻 钩子函数 触发时机 ngOnChanges

15.8K30

Angular 英雄编辑器

@Component 是一个修饰器函数,这个函数为组件指定了 Angular 元数据。 CLI 自动生成了三个元数据属性: selector — 组件 CSS 元素选择器。...CSS 元素选择器 app-heroes 用来父组件模板匹配 HTML 元素名称,以识别出该组件。...显示 hero 对象 修改模板绑定,以显示英雄名字,并在详情显示 id 和 name,就像这样: heroes.component.html (HeroesComponent 模板) ...AppModule Angular 需要知道如何把应用程序各个部分组合到一起,以及该应用需要哪些其它文件和库。 这些信息被称为元数据(metadata)。...你可以编辑英雄名字,并且会看到这个改动立刻体现在这个输入框上方  。 声明 HeroesComponent 每个组件都必须声明(且只能声明)一个 NgModule 

2.5K50

Angular 英雄编辑器

@Component 是一个修饰器函数,这个函数为组件指定了 Angular 元数据。 CLI 自动生成了三个元数据属性: selector — 组件 CSS 元素选择器。...CSS 元素选择器 app-heroes 用来父组件模板匹配 HTML 元素名称,以识别出该组件。...显示 hero 对象 修改模板绑定,以显示英雄名字,并在详情显示 id 和 name,就像这样: heroes.component.html (HeroesComponent 模板) ...AppModule Angular 需要知道如何把应用程序各个部分组合到一起,以及该应用需要哪些其它文件和库。 这些信息被称为元数据(metadata)。...你可以编辑英雄名字,并且会看到这个改动立刻体现在这个输入框上方  。 声明 HeroesComponent 每个组件都必须声明(且只能声明)一个 NgModule 

2.6K70
领券