Angular 如何处理后端删除元素后元素列表的刷新

假设我有下面的组件.它显示从后端服务获取的员工列表，正如您所看到的，每个员工都显示一个删除按钮，如果单击该按钮，将触发后台调用以根据员工的ID删除该员工.如果一切顺利，删除后端服务将返回200，仅此而已.

现在，为了使我的员工列表保持更新，我需要再次调用Fetch Employees后端服务来获取更新的列表，这对我来说似乎很不幸，因为它所需要的只是以某种方式触发asyn管道再次执行.

这件事还能处理得更好吗？

@Component({
  selector: 'app-employee-home',
  template: '<div *ngFor="let employee of (employees$ | async) as employees">\n' +
    '  <ul>\n' +
    '    <li>{{employee.firstname}}</li>\n' +
    '    <li>{{employee.lastname}}</li>\n' +
    '  </ul>\n' +
    '  <button (click)="delete(employee.id)">Delete</button>\n' +
    '</div>',
  styleUrls: ['./employee-home.component.scss']
})
export class EmployeeHomeComponent{

  employees$!: Observable<any>;

  constructor(private httpClient: HttpClient,
              private router: Router) {
    this.employees$ = this.httpClient.get('http://localhost:8080/employees')
      .pipe(
        map(response => response.content )
      );
  }

  delete(id: any) {
    this.httpClient.delete(`http://localhost:8080/employees/${id}`)
      .subscribe(value => {
        this.employees$ = this.httpClient.get('http://localhost:8080/employees')
          .pipe(
            map(response => response.content )
          );
      });
  }
}