web-dev-qa-db-fra.com

ajouter des données à la fin d'un tableau d'objets de comportement Angular 5

J'ai certaines données que je souhaite partager avec l'ensemble de l'application, j'ai donc créé un service tel que .. 

user.service 

userDataSource = BehaviorSubject<Array<any>>([]);

userData = this.userDataSource.asObservable();

updateUserData(data) {
    this.userDataSource.next(data);
}

puis dans mon composant, je reçois des données d'une API et les envoie ensuite à userDataSource comme si .. 

constructor(
private: userService: UserService,
private: api: Api
){
}

ngOnInit() {
    this.api.getData()
      .subscribe((data) => { 
         this.userService.updateUserData(data);
      })
}

maintenant que tout fonctionne mais .. Je veux pouvoir ajouter des données à la fin du tableau à l'intérieur de la variable userDataSource, donc en gros l'équivalent d'un .Push puis-je simplement appeler la fonction updateUserData() et ajouter davantage de données est actuellement dedans?

Toute aide serait appréciée

javascriptangulartypescript
4
Smokey Dawson

Vous pouvez ajouter une nouvelle méthode à votre service telle que addData dans laquelle vous pouvez combiner vos données précédentes avec de nouvelles données, par exemple.

import {Injectable} from '@angular/core';
import {BehaviorSubject} from 'rxjs/BehaviorSubject';

@Injectable() 
export class UserService {
    userDataSource: BehaviorSubject<Array<any>> = new BehaviorSubject([]);

    userData = this.userDataSource.asObservable();

    updateUserData(data) {
        this.userDataSource.next(data);
    }

    addData(dataObj) {
        const currentValue = this.userDataSource.value;
        const updatedValue = [...currentValue, dataObj];
        this.userDataSource.next(updatedValue);
    }
}
7
Arun Redhu

Normalement, Observables et Subjects sont censés être des flux de données, pas une assignation de données. BehaviorSubjects sont différents car ils conservent leur dernière valeur émise.

Normalement, Subjects ou BehaviorSubjects à l'intérieur d'une classe contenue (comme un service) ne veulent pas s'exposer publiquement à d'autres classes. Il est donc recommandé d'accéder à leurs propriétés à l'aide de getters ou de méthodes. Cela maintient le flux de données froid pour tous les abonnés.

Cependant, puisque la variable BehaviorSubject contient la dernière valeur émise, il existe quelques options ici. Si tous les abonnés ont besoin d'un flux concaténé de données de chaque émission, vous pouvez accéder à la dernière valeur émise et y ajouter:

userDataSource = BehaviorSubject<any[]>([]);

userData = this.userDataSource.asObservable();

updateUserData(data) {

    this.userDataSource.next(this.userDataSource.value.Push(data));
}

... ou, dans ce qui pourrait être considéré comme une meilleure pratique, les abonnés à ce sujet pourraient effectuer leur propre transformation sur le flux:

this.api.userData()
  .scan((prev, current) => prev.Push(current). [])
  .subscribe((data) => { 
     this.concatenatedUserData = data;
  });
0
joh04667