0
votes

Comment ajouter `map` opérateur dans l'abonnement

Dans mon composant, je reçois les événements de parent. (wrapper) mais avant d'envoyer au modèle, j'ai besoin d'itération et d'ajouter la valeur de la date dans la matrice. ne fonctionne pas pour moi après que je fasse cela avec abonnement.

Quelqu'un vous montre la bonne façon de ré-attribuer la valeur après l'itération? P>

Voici mon essai: p>

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

}


3 commentaires

Vous devriez cartographier vos données avant de vous abonner.


Vous voulez vous maquiller dans la composante wrapper?


@ 3GWebTRAIN no, dans le tuyau () partie de votre observable, écrit events.pipe (plan (..)). S'abonner (...)


4 Réponses :


0
votes

Ici, vous pouvez utiliser l'opérateur de carte avant d'abonner. Voir ci-dessous le code mis à jour. xxx

espère que cette aide!


1 commentaires

@Thepram - Obtenir une erreur comme src / app / calendrier / composants / composants / ibo-calendrier / ibo-calendar.compon entts (46,31): Erreur TS1005: '', 'attendu. src / app / calendrier / composants / ibo-calendrier / ibo-calendar.compon entts (47,11): Erreur TS1005: ':' attendu.



2
votes

pour rxjs> = 6 xxx

Essayez: xxx

ou vous pouvez faire: xxx


2 commentaires

Obtenir une erreur comme ceci.vents.subscribe n'est pas une fonction


@ 3GWebRAIN: Par exemple 2?



0
votes

map fonctionne sur tableau, vous devriez essayer d'utiliser "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()
            }
        })
    })


0 commentaires

0
votes

Le problème est que vous ne pouvez pas modifier la valeur de l'observable à l'intérieur de la méthode d'abonnement. La seule chose que vous puissiez faire à l'intérieur de la souscription consiste à utiliser forte> la valeur d'une manière ou d'une autre.

Au lieu de cela, si vous souhaitez modifier la valeur de l'observable, vous devez utiliser la carte Strong> Opérateur. P>

Dans l'exemple ci-dessous, nous utilisons deux fonctions différentes appelées Carte: One est un opérateur RXJS, nous l'utilisons pour modifier la valeur à l'intérieur de l'observable. L'autre est une fonction de tableau qui est originaire de JavaScript. Nous l'utilisons pour changer chaque article fort> de la matrice. P>

J'ai utilisé la syntaxe de diffusion ici (...) Parce que je pense que vous le trouvez utile. P>

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


0 commentaires