直到刷新才会删除答案

【问题标题】：Delete doesn't happen until refresh直到刷新才会删除
【发布时间】：2020-05-01 02:50:12
【问题描述】：

所以我制作了一个显示几种疾病的小应用程序（它仍处于早期阶段）。目前，您可以过滤疾病、添加新疾病和删除疾病。我这样做是为了当您添加疾病时，您无需刷新页面即可在列表中看到新疾病。然后我尝试用删除功能做同样的事情，但它实际上并没有改变列表，直到你刷新页面。我在某处找到了解决方案，但它仍然不起作用。下面是我的数据服务代码

@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)

deleteDisease方法中的这部分我在网上某处找到，但它不起作用。

【问题讨论】：

标签： angular

【解决方案1】：

尝试调试一个订阅函数，该函数应该在 delete 方法调用后触发。也许 delete 方法不会发出任何值，因此无法访问您的过滤器功能。

【讨论】：

@thijsheyndrickx 在分配过滤后的数组后尝试 console.log this._disease。它是否包含正确的数据？删除的项目丢失了吗？
是的，我就是这样找到的！问题出在 map() 功能上。删除它解决了这个问题。谢谢！

【解决方案2】：

这可能是变更检测问题。

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

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

【讨论】：