Así que hice una pequeña aplicación que muestra un par de enfermedades (todavía está en sus primeras etapas). Por ahora, puede filtrar las enfermedades, agregar una nueva enfermedad y eliminar una enfermedad. Lo hice para que cuando agregue una enfermedad, no necesite actualizar la página para ver la nueva enfermedad en la lista. Luego intenté hacer lo mismo con la función de eliminación, pero en realidad no cambia la lista hasta que actualiza la página. Encontré una solución en alguna parte, pero todavía no funciona. A continuación se muestra mi código de DataService

@Injectable({
  providedIn: 'root'
})
export class DiseaseDataService {
  private _diseases: Disease[];
  private _diseases$ = new BehaviorSubject<Disease[]>([]);


  constructor(private http: HttpClient) {
    this.diseases$.subscribe((diseases: Disease[]) => {
      this._diseases = diseases;
      this._diseases$.next(this._diseases);
    });
  }
  get allDiseases$(): Observable<Disease[]> {
    return this._diseases$; 
  }
  get diseases$(): Observable<Disease[]> {
    return this.http.get(`${environment.apiUrl}/diseases/`).pipe(
      catchError(this.handleError),
      tap(console.log),
      map(
        (list: any[]): Disease[] => list.map(Disease.fromJson)
      )
    );
  }
  addNewDisease(disease: Disease) {
    return this.http
      .post(`${environment.apiUrl}/diseases/`, disease.toJson())
      .pipe(catchError(this.handleError), map(Disease.fromJson))
      .subscribe((dis: Disease) => {
        this._diseases = [...this._diseases, dis];
        this._diseases$.next(this._diseases);
      });

  }
  deleteDisease(disease: Disease) {
    return this.http
      .delete(`${environment.apiUrl}/diseases/${disease.id}`)
      .pipe(catchError(this.handleError), map(Disease.fromJson))
      .subscribe(() => {
        this._diseases = this._diseases.filter(dis => dis.id != disease.id)
        this._diseases$.next(this._diseases);
      })
  }
  handleError(err: any): Observable<never> {
    let errorMessage: string;
    if (err instanceof HttpErrorResponse) {
      errorMessage = `'${err.status} ${err.statusText}' when accessing '${err.url}'`;
    } else {
      errorMessage = `an unknown error occured ${err}`;
    }
    console.log(err);
    return throwError(errorMessage);
  }

}

This._diseases = this._diseases.filter (dis => dis.id! = disease.id)

Esta parte del método deleteD disease que encontré en algún lugar en línea, pero no funciona.

0
thijsheyndrickx 30 abr. 2020 a las 21:12

2 respuestas

Intente depurar una función de suscripción, que debe activarse después de la llamada al método de eliminación. Tal vez el método de eliminación no emite ningún valor, por lo que no se puede alcanzar su función de filtro.

0
Maksym Sorokatov 30 abr. 2020 a las 18:50

Probablemente sea un problema de detección de cambios.

*ngFor="let disease of diseases; trackBy: id"

https://angular.io/api/common/NgForOf

0
Nick Ciolpan 30 abr. 2020 a las 18:29