在Angular中如何监听某个值的变化
更新时间:2023年03月04日 13:42:32 投稿:jingxian
这篇文章主要介绍了在Angular中如何监听某个值的变化问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
Angular监听某个值的变化
使用getter
在 Angular
中可以用 getter
来监听某个值的变化,类似于 Vue
中的 watch
import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { _inputVal; set inputVal(val) { this._inputVal = val; this.inputChange(); }; get inputVal() { return this._inputVal; } inputChange(val) { console.log(val); } }
angular使用form表单监听数据
主要使用方法类 FormGroup,FormBuilder,Validators
引入主要使用方法类 FormGroup,FormBuilder,Validators
import { Validators, FormGroup, FormBuilder } from '@angular/forms';
赋值引入
validateForm: FormGroup; constructor(private fb: FormBuilder,private ref: ChangeDetectorRef,private private) {}
创建表单+监听数据
data = { name: [null, [Validators.required]], //Validators.required 表示验证(必填) }; ngOnInit(): void { this.validateForm = this.fb.group(this.data); // 监听整个表单的变化 this.validateForm.valueChanges.subscribe(data => console.log('form', data)); // 单个control 变化 this.validateForm.get('name').valueChanges.subscribe(data => console.log('solo', data)); }
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
相关文章
ionic3+Angular4实现接口请求及本地json文件读取示例
本篇文章主要介绍了ionic3+Angular4实现接口请求及本地json文件读取示例,具有一定的参考价值,感兴趣的小伙伴们可以参考一下2017-10-10Angularjs中ng-repeat-start与ng-repeat-end的用法实例介绍
这篇文章主要给大家介绍了Angularjs中ng-repeat-start与ng-repeat-end的用法,文章开始先进行了简单的介绍,而后通过完整的实例代码详细给大家介绍这两者的用法,有需要的朋友们可以参考借鉴,下面来一起看看吧。2016-12-12Angular4项目中添加i18n国际化插件ngx-translate的步骤详解
这篇文章主要跟大家介绍了关于Angular4项目中添加i18n国际化插件ngx-translate的步骤,文中介绍的非常详细,对大家具有一定的参考学习价值,需要的朋友们下面来一起看看吧。2017-07-07
最新评论