web-dev-qa-db-fra.com

Comment pousser à observable de tableau en Angular 4? RxJS

J'ai une propriété sur ma classe de service comme suit:

articles: Observable<Article[]>;

Il est peuplé par une fonction getArticles () utilisant la solution standard http.get().map(). 

Comment puis-je pousser manuellement un nouvel article dans ce tableau; Celui qui n'est pas encore persistant et qui ne fait donc pas partie du http get?

Mon scénario est le suivant: vous créez un nouvel article et, avant qu'il ne soit enregistré, j'aimerais que le tableau Article [] reçoive ce nouvel élément afin qu'il apparaisse dans ma liste d'articles.

De plus, ce service est partagé entre 2 composants. Si le composant A le consomme à l’aide de ng OnInit() et lie le résultat à une section répétitive *ngFor, la mise à jour du tableau de services à partir du composant B met-elle à jour simultanément les résultats de la section ngFor du composant A? Ou dois-je mettre à jour la vue manuellement?

Merci beaucoup, Simon

javascriptangularrxjsobservable
4
simon_www

Comme vous l'avez dit dans vos commentaires, j'utiliserais un sujet. 

L'avantage de garder articles observable plutôt que de le stocker en tant que tableau est que http prend du temps. Vous pouvez donc vous abonner et attendre les résultats. De plus, les deux composants obtiennent des mises à jour.

// Mock http
const http = {
  get: (url) => Rx.Observable.of(['article1', 'article2']) 
}

const articles = new Rx.Subject();

const fetch = () => {
  return http.get('myUrl').map(x => x).do(data => articles.next(data))
}

const add = (article) => {
  articles.take(1).subscribe(current => {
    current.Push(article);
    articles.next(current);
  })
}

// Subscribe to 
articles.subscribe(console.log)

// Action
fetch().subscribe(
  add('article3')
)
<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/5.5.2/Rx.js"></script>

4
Richard Matsen

ex d'angular 4 book ng-book

Subject<Array<String>> example =  new Subject<Array<String>>();


Push(newvalue:String):void
{
  example.next((currentarray:String[]) : String[] => {
    return  currentarray.concat(newValue);
   })

}

dans l'exemple suivant, exemple suivant, prenez ce qui suit: stockez la valeur actuelle du tableau Stocké dans l'observable, insérez-y une nouvelle valeur et émettez la nouvelle valeur du tableau aux abonnés. C’est une expression lambda.Je pense que cela ne fonctionne que pour les observables sujet car ils tiennent jusqu’à la dernière valeur stockée dans leur méthode subject.getValue ();

0
yfdgvf asdasdas