web-dev-qa-db-fra.com

Angular 6 + RxJS 6.0: comment pousser un nouvel élément vers un tableau contenu par Observable

Je reçois des données du serveur firebase en morceaux tout en rendant ces données nécessite une bibliothèque qui insiste sur l'observable contient Array. Je suis en quelque sorte incapable de pousser un nouveau bloc de données vers un tableau de blocs de données existant contenu par observable,

Du service de données j'appelle par le sujet suivant et j'essaye d'ajouter un nouveau calEvent

 this.homeWorkerService.eventSubject.next(calEvent);

Dans le composant, j'ai le code suivant

events$: Observable<Array<CalendarEvent<any>>>;

et ngOnInit, je lui fournis des données comme

this.events$ = this.service.eventSubject.asObservable();

Pourriez-vous s'il vous plaît suggérer un moyen par lequel je peux ajouter un nouvel événement à observable qui contient déjà mes événements.

PS: J'utilise this lib pour rendre le calendrier et j'utilise remoteDB pour rendre les événements.

Merci,

angularrxjsobservablesubject
8
Alok G.

Votre sujet ici est un tableau de CalendarEvent, vous devez passer un tableau de CalendarEvent dans la méthode next (). Je recommanderais d'utiliser un BehaviorSubject dans votre cas. Voici un petit exemple:

import { Component } from '@angular/core';
import { Observable, BehaviorSubject, of } from 'rxjs';
import { take } from 'rxjs/operators';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  obsArray: BehaviorSubject<any[]> = new BehaviorSubject<any[]>([]);
  array$: Observable<any> =  this.obsArray.asObservable();

  constructor() {
  }

  ngOnInit() {
    this.addElementToObservableArray('It works');
  }

  addElementToObservableArray(item) {
    this.array$.pipe(take(1)).subscribe(val => {
      console.log(val)
      const newArr = [...val, item];
      this.obsArray.next(newArr);
    })
  }
}

Vous pouvez voir un exemple en direct ici: Stackblitz .

J'espère que ça aide!

13
GeoAstronaute

En plus de la réponse de GeoAstronaute, voici comment je supprimerais des éléments du tableau:

  removeElementToObservableArray(idx) {
    this.array$.pipe(take(1)).subscribe(val => {
      const arr = this.subject.getValue()
      arr.splice(idx, 1)
      this.subject.next(arr)
    })
  }

I.E: votre ngforloop dans le HTML pourrait avoir le let i = index, qui fournirait un index des données que vous souhaitez supprimer. Deuxièmement, la fonction de suppression doit être à l'intérieur de la balise ngforloop :-)

1
blixenkrone