angular - 如何在订阅中添加`map`运算符
问题描述
在我的组件中,我从父级获取事件。(包装器)但在我发送到模板之前,我需要迭代并在数组中添加日期值。在我通过订阅执行此操作后对我不起作用。
有人告诉我在迭代后重新分配值的正确方法吗?
这是我的尝试:
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()
}
})
})
推荐阅读
- python - 不知道如何将其合并到我的代码中
- javascript - 使用 React Hooks 时在 `onClick()` 上获取最新状态
- vue.js - Vuetify 带有插槽的自动完成功能,键入时没有自动完成建议
- linux - 如何拆分变量以在行之间打印出其他内容?
- python - Pandas 中的 Excel Sumproduct 等效项
- scala - Spark:配置每个核心的并发任务数
- django - 在不同的端口上运行 django 多个应用程序
- excel - 删除刚刚添加到表最后一行的行
- javascript - Javascript循环遍历对象键
- javascript - 如何计算对象数组中唯一位置的总数?