2 votes

Mise à jour de l'observable Rxjs d'un tableau en ajoutant, filtrant ou supprimant des éléments.

J'ai quelques cartes affichées dans l'interface utilisateur.

<div *ngFor="let item of cards | async">...</div>

Évidemment, les cartes seront l'Observable du tableau de type carte.

J'ai donc une interface de carte, disons qu'elle possède 3 propriétés

Id, nom, description.

Mon cas d'utilisation est le suivant.

  1. Je veux ajouter une nouvelle carte au tableau d'observables et je dois la refléter dans le tableau.

  2. Je veux supprimer la carte de l'observable et doit refléter au modèle.

  3. Je dois pouvoir filtrer la carte en fonction du nom, par exemple, et cela doit se refléter dans le modèle.

En bref, toutes les ouvertures doivent être effectuées dans l'observable car j'ai utilisé un tuyau asynchrone dans le modèle.

6voto

AbolfazlR Points 165

Pour ce faire, vous pouvez utiliser map opérateur rxjs comme les suivantes :

  cards$: Observable<Card[]>;

  constructor(private serivce: CardService) { }

  ngOnInit(): void {
    this.cards$ = this.serivce.getCards();
  }

Ajouter un élément au tableau d'observables

  // add item with id=6
  addItemToObservable() {
    this.cards$ = this.cards$.pipe(map(data => {
      return [...data, { id: 6, name: 'name-6', description: "description-6" }]
    }))
  }

Suppression d'un élément du tableau d'observables

  removeItemFromObservable({id}) {
    this.cards$ = this.cards$.pipe(map(data => {
      return data.filter(item => item.id !== id)
    }))
  }

Et enfin dans votre Html :

<ng-container *ngIf="(cards$ | async) as cards">
  <table>
    <tr *ngFor="let item of cards">
      <td>{{item.id}}</td>
      <td>{{item.name}}</td>
      <td>{{item.description}}</td>
      <td>
         <button type="button" (click)="removeItemFromObservable(item)">
              Remove
          </button>
      </td>
    </tr>
  </table>
</ng-container>

<button type="button" (click)="addItemToObservable()">
  Add
</button>

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X