[英]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.