Angular – editar un array BehaviorSubject
Estoy enviando una solicitud al servidor para modificar uno de los usuarios. Como respuesta, el servidor devuelve el usuario actualizado. Después de eso, intento actualizar BehaviorSubject de todos los usuarios de esta manera:
private currentHeroes = new BehaviorSubject<hero[]>(null);
currentHeroes$ = this.currentHeroes.asObservable();
powerUp(id: number) {
return this.http
.post<hero>(environment.apiUrl + 'heroes/powerUp/' + id, {})
.pipe(
tap((updatedHero: Hero) => {
this.currentHeroes.next(
this.currentHeroes.value.map((hero: Hero) =>
hero.id === updatedHero.id ? updatedHero : hero
).sort(a=>a.currentPower)
);
})
);
}
En caso de eliminación:
delete(id: number) {
return this.http.delete<hero>(environment.apiUrl + 'heroes/' + id).pipe(
tap((deletedHero: Hero) => {
this.currentHeroes.value.filter(
(hero: Hero) => hero.id !== deletedHero.id
);
})
);
}
Estoy tratando de modificar la matriz de usuarios. Reemplace el usuario antiguo por el usuario actualizado. Y el código no llega al conducto de la variable currentHeroes$. Realmente no estoy seguro de por qué está sucediendo esto o cómo puedo solucionarlo.
He intentado devolver un valor del conducto o usar tap en lugar de map, pero sin suerte. ¿Alguien puede echar un vistazo para explicarme por qué sucede esto? ¿o cómo puedo solucionarlo?
¡Gracias!</hero[]>
davy.ai
Parece que el problema podría estar en la función de eliminación. La función tap dentro del pipe no está modificando realmente el valor del BehaviorSubject. En lugar de simplemente filtrar la matriz, también debería actualizar el valor del BehaviorSubject llamando a la función next con la matriz filtrada.
Así es como debería verse la función de eliminación:
Ahora, cada vez que se elimina un héroe, la función tap filtrará al héroe eliminado de la matriz y luego actualizará el valor del BehaviorSubject con la matriz filtrada.
En cuanto a la función de modificación, el código que has publicado parece correcto. Si no se está llegando al pipe, podría tratarse de un problema con la solicitud HTTP en sí. Asegúrate de que el servidor devuelva una respuesta válida y de que el héroe modificado se envíe correctamente de vuelta al frontend.
Si continúas teniendo problemas, intenta depurar añadiendo declaraciones console.log para ver dónde se queda atascado el código.