Angular调用API后如何自动刷新数据，无需手动刷新页面？

首先你代码里async/await和subscribe混用是错误的——subscribe返回的是订阅对象而非Promise，await起不到等待API请求完成的作用。另外手动调用ngOnInit确实不符合规范，它是Angular的生命周期钩子，应该由框架自动触发，而非手动调用。

正确的做法是把数据加载逻辑抽成独立方法，在API调用成功后主动调用这些方法刷新数据：

1. 抽取数据加载方法 #

把初始化时的获取数据逻辑拆成单独方法，方便复用：

loadPatientInfo(): void {
  this.getinfo.getInfo('patient').subscribe((response) => {
    this.data = response;
    console.log(this.data);
  });
}

loadDoctors(): void {
  this.doc$ = this.getinfo.getInfo('doctor');
}

2. 修改confirmDoctor方法 #

在分配医生的API请求成功回调里，调用上述方法刷新数据：

confirmDoctor(selectedDoctor: string, pid: string): void {
  console.log(selectedDoctor);
  this.assign.AssignDoctor(selectedDoctor, pid).subscribe(
    (response) => {
      console.log(response);
      // 刷新患者信息和医生列表
      this.loadPatientInfo();
      this.loadDoctors();
    },
    (error) => {
      // 别忘了处理错误场景
      console.error('分配医生失败', error);
    }
  );
}

3. 调整ngOnInit初始化逻辑 #

在生命周期钩子中调用抽取的方法完成初始数据加载：

ngOnInit(): void {
  this.loadPatientInfo();
  this.loadDoctors();
}

可选：async/await的正确用法 #

如果你倾向于用async/await风格，需要把Observable转为Promise，用Angular 12+推荐的firstValueFrom：

import { firstValueFrom } from 'rxjs';

async confirmDoctor(selectedDoctor: string, pid: string): Promise<void> {
  console.log(selectedDoctor);
  try {
    const response = await firstValueFrom(this.assign.AssignDoctor(selectedDoctor, pid));
    console.log(response);
    this.loadPatientInfo();
    this.loadDoctors();
  } catch (error) {
    console.error('分配医生失败', error);
  }
}

这样API操作完成后会自动拉取最新数据，无需手动刷新浏览器，也符合Angular的最佳实践。

内容的提问来源于stack exchange，提问作者senku