在Angular中如何監(jiān)聽(tīng)某個(gè)值的變化
更新時(shí)間：2023年03月04日 13:42:32 投稿：jingxian
這篇文章主要介紹了在Angular中如何監(jiān)聽(tīng)某個(gè)值的變化問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
Angular監(jiān)聽(tīng)某個(gè)值的變化
使用getter
在 Angular 中可以用 getter 來(lái)監(jiān)聽(tīng)某個(gè)值的變化，類(lèi)似于 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表單監(jiān)聽(tīng)數(shù)據(jù)
主要使用方法類(lèi) FormGroup，F(xiàn)ormBuilder，Validators
引入主要使用方法類(lèi) FormGroup，F(xiàn)ormBuilder，Validators
import {
?Validators,
?FormGroup,
?FormBuilder
} from '@angular/forms';
賦值引入
?? ?validateForm: FormGroup;
?? ?constructor(private fb: FormBuilder,private ref: ChangeDetectorRef,private private) {}創(chuàng)建表單+監(jiān)聽(tīng)數(shù)據(jù)
? data = {
? ?? ?name: [null, [Validators.required]], //Validators.required 表示驗(yàn)證（必填）
? };
? ngOnInit(): void {
?? ?this.validateForm = this.fb.group(this.data);
?? ?// 監(jiān)聽(tīng)整個(gè)表單的變化
? ? this.validateForm.valueChanges.subscribe(data => console.log('form', data));
?? ?// 單個(gè)control 變化
? ? this.validateForm.get('name').valueChanges.subscribe(data => console.log('solo', data));
? }總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Angular 2使用路由自定義彈出組件toast操作,結(jié)合實(shí)例形式分析了Angular2使用路由操作彈出組件toast相關(guān)定義與使用技巧,需要的朋友可以參考下2019-05-05
這篇文章主要介紹了AngularJS表單編輯提交功能實(shí)例,本文講解如何修改表單的默認(rèn)值,需要的朋友可以參考下2015-02-02
AngularJS中update兩次出現(xiàn)$promise屬性無(wú)法識(shí)別的解決方法
最近在工作中用AngularJS中update了兩次之后發(fā)現(xiàn)$promise屬性無(wú)法識(shí)別了，后來(lái)通過(guò)查找相關(guān)的資料終于解決了，想著記錄下方便自己或者有需要的朋友，所以本文主要介紹了AngularJS中update兩次出現(xiàn)了$promise屬性無(wú)法識(shí)別的解決方法,需要的朋友可以參考借鑒。2017-01-01
angularJS Provider、factory、service詳解及實(shí)例代碼
這篇文章主要介紹了angularJS Provider詳解及實(shí)例代碼的相關(guān)資料,需要的朋友可以參考下2016-09-09
下面小編就為大家?guī)?lái)一篇淺談Angular中ngModel的$render。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-10-10
Angular 4.x 路由快速入門(mén)學(xué)習(xí)
這篇文章主要介紹了Angular 4.x 路由快速入門(mén)學(xué)習(xí)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-05-05
本文給大家分享Angularjs cookie 操作實(shí)例詳解，demo案例分析，感興趣的朋友參考下吧2017-09-09
Angular JS數(shù)據(jù)的雙向綁定詳解及實(shí)例
這篇文章主要介紹了Angular JS數(shù)據(jù)的雙向綁定詳解及實(shí)例的相關(guān)資料,需要的朋友可以參考下2016-12-12
angular5 httpclient的示例實(shí)戰(zhàn)
本篇文章主要介紹了angular5 httpclient的示例實(shí)戰(zhàn)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
這篇文章主要介紹了淺談Angular6的服務(wù)和依賴(lài)注入，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-06-06