Angular 角度2+;RxJS-无法读取未定义属性的下一个属性
我已经创建了下一个组件:Angular 角度2+;RxJS-无法读取未定义属性的下一个属性,angular,functional-programming,rxjs,reactive-programming,Angular,Functional Programming,Rxjs,Reactive Programming,我已经创建了下一个组件: export class MonthView { currentMonth: Moment = moment(); currentMonth$: Observable<Moment>; currentMonthObserver: Observer<Moment>; decrement: Function; increment: Function; constructor() { this.currentMonth
export class MonthView {
currentMonth: Moment = moment();
currentMonth$: Observable<Moment>;
currentMonthObserver: Observer<Moment>;
decrement: Function;
increment: Function;
constructor() {
this.currentMonth$ = new Observable((observer: Observer<Moment>) => {
this.currentMonthObserver = observer;
}).share();
const decrementCounter$: Observable<Function> = Observable.create((observer) => {
this.decrement = () => {
observer.next();
};
});
const incrementCounter$: Observable<Function> = Observable.create((observer) => {
this.increment = () => {
observer.next();
};
});
Observable
.merge(
decrementCounter$.map(() => - 1),
incrementCounter$.map(() => + 1)
)
.startWith(0)
.scan((currentCount: number, value: number) => currentCount + value)
.subscribe((count: number) => {
this.currentMonthObserver.next(this.currentMonth.clone().add(count, 'M')); //this.currentMonthObserver is undefined
});
}
}
此代码
This.currentMonthObserver=observer代码>输入
this.currentMonth$ = new Observable((observer: Observer<Moment>) => {
this.currentMonthObserver = observer;
}).share();
不确定您想做什么,但假设您在查看inc和dec时有按钮,我认为您可以简化一些:
export class MonthView {
currentMonth$: Observable<Moment>;
tickMonth$: new Subject<Number>();
constructor() {
this.currentMonth$ = tickMonth$
.scan((myMoment: Moment, tickMonthValue: number) => myMoment.clone().add(tickMonthValue, 'M'))
.startWith(new Moment());
}
}
导出类MonthView{
currentMonth$:可观察的;
tickmount$:新主题();
构造函数(){
此.currentMonth$=tickMonth$
.scan((myMoment:Moment,tickMonthValue:number)=>myMoment.clone().add(tickMonthValue,'M'))
.startWith(新时刻());
}
}
然后在您的视图中,您可以分别执行(单击)=“tickmount$.next(1)”
和(单击)=“tickmount$.next(-1)”
,以增加和减少月份
然后您只需使用currentmount | async
来获取您的月份在我获取异常之前,您能指出一种初始化它的方法吗?我是在一个子组件中订阅它的。我不确定从你的代码中你到底想要完成什么。为了使这一步有效,您需要调用this.currentMonth.subscribe()代码>。模板上有两个按钮,可以将ui移动到下一个月和上一个月。请看模板(在更新的问题中)似乎有很多模糊,只是递增递减。我想我需要更多关于你想要完成什么的细节。我想从我的答案中添加的内容开始,但我不知道如何继续,因为我不清楚您的要求。我将尝试澄清我自己。想象一个组件,如模板和图像中所示(在更新的答案中)。单击“下一步”按钮应将日历移到下一个月,单击“上一步”按钮应将日历移到上一个月。还有一个子组件正在呈现日历(如模板中所示)。
constructor() {
this.currentMonth$=new Subject().startWith(0).share();
}
increment() {
this.currentMonth$.next(1);
}
decrement() {
this.currentMonth$.next(-1);
}
export class MonthView {
currentMonth$: Observable<Moment>;
tickMonth$: new Subject<Number>();
constructor() {
this.currentMonth$ = tickMonth$
.scan((myMoment: Moment, tickMonthValue: number) => myMoment.clone().add(tickMonthValue, 'M'))
.startWith(new Moment());
}
}