Il y a un Observable qui envoie un tableau d'offres à mon composant. Mais lorsque la liste est modifiée (une est supprimée), cela ne change pas la liste que j'obtiens dans le composant.

Je l'ai essayé avec ngOnChanges pour m'abonner à nouveau à la liste et mettre à jour la liste dans mon composant, mais il ne détecte aucun changement sur la liste.

Lorsque j'utilise ngDoCheck, cela a fonctionné, mais je veux une solution un peu moins drastique pour cela.

offre.service.ts :

    // observable of offers list
      public getAll(): Observable<Offer[]> {
        return of(this.offers);
      }

component.ts:

    offers: Offer[] = [];
      selectedOfferId = -1;
    
      constructor(private offerService: OfferService) { }
    
      ngOnInit(): void {
        this.offerService.getAll().subscribe(data => {
          this.offers = data;
        });
      }
    
      ngOnChanges(): void {
        this.offerService.getAll().subscribe(data => {
          this.offers = data;
        });
      }
1
Ronny Giezen 7 nov. 2020 à 17:37

1 réponse

Meilleure réponse

Vous pouvez communiquer entre les composants en utilisant un Observable et un Sujet (qui est un type d'observable), je n'entrerai pas trop dans les détails, vous pouvez trouver plus d'informations ici, il existe deux méthodes : Observable.subscribe() et Subject.next().

Observable.subscribe()

La méthode d'abonnement observable est utilisée par les composants angulaires pour s'abonner aux messages envoyés à un observable.

Sujet.suivant()

La méthode subject next est utilisée pour envoyer des messages à un observable qui sont ensuite envoyés à tous les composants angulaires qui sont abonnés à cet observable.

Une solution de contournement :

Offre.service.ts :

import { Injectable } from '@angular/core';
import { Observable, Subject } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class OfferService {
    private subject = new Subject<any>();
    
    //...

    getOffers(message: string) {
        return this.subject.asObservable();
    }

    removeOffers() {
      //...remove logic
      this.subject.next({this.offers})
    }

}

Component.ts:

 subscription: Subscription;

 ngOnInit(): void {
       this.subscription =  this.offerService.getOffers().subscribe(offers => {
          //...
       })
 }
1
lissettdm 7 nov. 2020 à 16:27