Удаление не происходит до обновления

Question

Итак, я сделал небольшое приложение, которое отображает пару заболеваний (оно все еще находится на ранней стадии). На данный момент вы можете отфильтровать заболевания, добавить новое заболевание и удалить заболевание. Я сделал так, чтобы при добавлении болезни вам не нужно было обновлять страницу sh, чтобы увидеть новую болезнь в списке. Затем я попытался сделать то же самое с функцией удаления, но она фактически не меняет список, пока вы не обновите sh страницу. Я нашел решение где-то, но оно все еще не работает. Ниже мой код 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! = Болезнь.ид)

эта часть в методе deleteDisease I нашел где-то в сети, но это не работает.

Answer 1

Попробуйте отладить функцию подписки, которая должна быть запущена после вызова метода delete. Возможно, метод delete не выдает никаких значений, поэтому ваша функция фильтра недоступна.

Answer 2

Вероятно, это проблема обнаружения изменений.

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

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