Как добавить оператор `map` в подписку

Question

В моем компоненте я получаю события от родителя.(обертка) Но прежде чем отправлять в шаблон, я должен повторить и добавить значение даты в массив.не работает для меня после того, как я делаю это с подпиской.

кто-нибудь покажет мне правильный способ переназначить значение после выполнения итерации?

вот моя попытка:

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()
                }
            })
        })

}

Answer 1

Проблема в том, что вы не можете изменить значение наблюдаемого внутри метода подписки.Единственное, что вы можете сделать внутри подписки - это использовать значение каким-либо образом.

Вместо этого, если вы хотите изменить значение наблюдаемой, вам нужно использовать карту operator.

В приведенном ниже примере мы используем две разные функции, называемые map: одна является оператором rxjs, мы используем ее для изменения значения внутри наблюдаемой.Другой является функцией массива, которая является родной для JavaScript.Мы используем его для изменения каждого элемента массива.

Я использовал здесь синтаксис распространения (...), потому что я думаю, что вы не возражаете, он окажется полезным.

 this.updatedEvents = this.events.pipe(
    map((eventArr) => {
            return eventArr.map((event) => {
                ...event,
                date : new Date()
            })
        }));

Answer 2

Для 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()
            }
        })
    })

Answer 3

Карта работает с массивом, вы должны попробовать использовать "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()
            }
        })
    })

Примечание: карта заменена на events.map

Дайте мне знать, если она работает для вас.

Answer 4

Здесь вы можете использовать оператор карты перед подпиской.см. ниже обновленный код.

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);

        })
    })

Надеюсь, эта помощь!