[英]How to subscribe on variable changes?
我已聲明以下變量:
public filter: IFilterWeekScheduleClassShort = {};
如何訂閱更改(監聽對象過濾器)?
我試過這個:
private filter: IFilterWeekScheduleClassShort = {};
private filterChanges: BehaviorSubject<IFilterWeekScheduleClassShort> = new BehaviorSubject(this.filter);
this.filterChanges.subscribe((model) => {
console.log(model);
});
好嗎?
我的最終代碼:
public _filter: IFilterWeekScheduleClassShort = {};
private filterChanges: BehaviorSubject<IFilterWeekScheduleClassShort> = new BehaviorSubject(this._filter);
this.filter = {a: 1, b: 2}
set filter(value: any) {
this._filter = value;
this.filterChanges.next(this._filter);
}
get filter() {
return this.filterChanges.asObservable();
}
訂閱:
this.filter.subscribe(model => {
console.log(model);
});
我從表單中做出的更改:
[(ngModel)]="_filter.teacherId"
做一個二傳手
private _filter: IFilterWeekScheduleClassShort = {};
set filter(value) {
this.doSomethingOnVariableChange(value);
this._filter = value;
}
現在你可以像這樣使用它
this.filter = 'x';
並且您的函數doSomethingOnVariableChange
將使用'x'
調用。
有一個可觀察到的:
private _filter: IFilterWeekScheduleClassShort = {};
private _filter$ = new BehaviorSubject(this._filter);
set filter(value) {
this._filter = value;
this._filter$.next(this._filter);
}
get filter() {
return this._filter$.asObservable();
}
我認為你想要得到的關閉是使用scan()
:
const filterChanges$ = new Subject()
const defaultFilter = {}
const filter$ = filterChanges$
.pipe(
scan((acc, mergeFilter) => {
return {
...acc,
...mergeFilter,
}
}, defaultFilter)
)
filter$.subscribe(console.log);
filterChanges$.next({ name: 'abc' })
filterChanges$.next({ num: 42 })
filterChanges$.next({ name: 'xyz' })
現場演示: https : //stackblitz.com/edit/rxjs6-demo-ngqkzv?file = index.ts
這將輸出:
{name: "abc"}
{name: "abc", num: 42}
{name: "xyz", num: 42}
前一段時間我做了一個小包裝圍繞window.Proxy
稱為rxjs-observable-object
,讓你包的任何對象,然后聽就可以了變化( https://github.com/martinsik/rxjs-ds#object ):
import { map } from 'rxjs/operators';
import { ObservableObject } from 'rxjs-observable-object';
const defaultFilter = {}
const { proxy, events } = new ObservableObject(defaultFilter);
const filter$ = events.onSet
.pipe(
map(({ target }) => target)
)
filter$.subscribe(console.log);
proxy['name'] = 'abc';
proxy['num'] = 42;
proxy['name'] = 'xyz';
現場演示: https : //stackblitz.com/edit/rxjs6-demo-hojjkk?file = index.ts
但是, rxjs-observable-object
現在有點過時,並且還需要安裝rxjs-comapt
包。
兩個示例的輸出都是相同的。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.