在我的组件中,我从父级获取事件。 (包装器)但在发送到模板之前,我需要迭代并在数组中添加日期值。订阅后,这对我不起作用。
任何人都会告诉我在迭代后重新分配值的正确方法吗?
这是我的尝试:
import { Component, OnInit, ChangeDetectionStrategy, Input } from '@angular/core';
import { CalendarService } from "./../../services/calendar.service";
import { ModelEvent, EventState } from "./../../models/model.event";
import { CalendarEvent } from 'angular-calendar';
import { colors } from "./../../utilities/colors";
import { setHours, setMinutes, setDate } from 'date-fns';
import { Observable } from 'rxjs';
import { tap, map } from 'rxjs/operators';
declare var $:any;
@Component({
selector: 'ibo-calendar',
templateUrl: './ibo-calendar.component.html',
styleUrls: ['./ibo-calendar.component.scss']
})
export class IboCalendarComponent implements OnInit {
// events = [];
eventId:number | null;
view: string = 'month';
// viewDate: Date = new Date('August 19, 2018');
viewDate: Date = new Date()
@Input() events:Observable<ModelEvent[]>;
@Input() currentEvent: ModelEvent;
clickedDate: Date;
updatedEvents:Observable<ModelEvent[]>;
constructor(private calendarService:CalendarService) { }
ngOnInit() {
this.updatedEvents = this.events.subscribe(events => {
console.log('events', events); //getting consoled.
return map(event => { //not works!!
return {
title : event.title,
name : event.name,
date : new Date()
}
})
})
}
对于RxJS> = 6
import { map } from 'rxjs/operators';
尝试:
this.updatedEvents = this.events.pipe(map(event => {
return {
title : event.title,
name : event.name,
date : new Date()
}
})).subscribe(events => {
console.log(events)
})
})
或者你可以这样做:
this.updatedEvents = this.events.subscribe(events => {
this.some_val_to_render_on_html = events.map(event =>
return {
title : event.title,
name : event.name,
date : new Date()
}
})
})
地图适用于数组,你应该尝试使用“events.map”
this.updatedEvents = this.events.subscribe(events => {
console.log('events', events); //getting consoled.
return events.map(event => {
return {
title : event.title,
name : event.name,
date : new Date()
}
})
})
注意:map由events.map替换
请让我知道这对你有没有用。
在这里你可以在订阅之前使用map运算符。见下面更新的代码。
import { map } from 'rxjs/operators';
ngOnInit() {
this.updatedEvents = this.events.pipe(map(event => {
return {
title : event.title,
name : event.name,
date : new Date()
}).subscribe(events => {
console.log('events', events);
})
})
希望这有帮助!
问题是你不能在subscribe方法中改变observable的值。您在订阅中唯一可以做的就是以某种方式使用该值。
相反,如果要更改observable的值,则需要使用map运算符。
在下面的例子中,我们使用两个不同的函数map:一个是rxjs运算符,我们用它来改变observable里面的值。另一个是javascript原生的数组函数。我们用它来改变数组的每个项目。
我在这里使用了扩展语法(...)因为我觉得你觉得它很有用。
this.updatedEvents = this.events.pipe(
map((eventArr) => {
return eventArr.map((event) => {
...event,
date : new Date()
})
}));