为什么我在 Angular 中不是在第一次点击而是在第二次点击时收到数据？

Question

有多个模块（例如职业、部门等），我在其中通过存储过程（Select 查询）从 SQL 服务器接收数据，进入后端 NEST JS 然后进入 Angular 前端以显示这些模块（职业、部门等），但问题是当我单击按钮时没有任何反应，当我第二次单击按钮时数据显示在网页上.当我在 Postman 中检查时，后端工作正常，第一次收到数据。问题出在前端。

Angular Service.ts 代码：

getdepartments(){
    const headers = new HttpHeaders().set('Content-Type', 'application/json').set('Authorization','Bearer'+' '+GlobalService.authtoken);
  
    return this.http.post<any>('http://localhost:3000/employee/getdepartments/',null,{headers}).subscribe(({data}) => {
      this.dataout = data});
  
  }

Component.ts代码：

departments(){
   this.departmentsService.getdepartments();
   this.dataout=this.departmentsService.dataout;
    }

HTML代码：

<div>
    <tr>
        <th>Departments </th>
        <th>Description </th>
    </tr>
    <tr *ngFor="let index of dataout">
        <td>{{index.Department}}</td>
        <td>{{index.Description}}</td>
    </tr>
</div>

网页：

Answer 1

问题是当您为组件设置数据时，对后端的异步调用尚未完成：

departments(){
  // this starts the call to your backend
  this.departmentsService.getdepartments(); 

  /* you immediately set "dataout" to datatout of your service, 
     but at this point your backend call has not finished so dataout 
     in your service is not set yet
 */
  this.dataout=this.departmentsService.dataout; 
}

例如，您可以通过将 http.post 对后端调用的可观察对象公开到您的组件来解决此问题（顺便说一句，出于显而易见的原因，这应该是一个 get 调用）：

getdepartments(){
  const headers = new HttpHeaders().set('Content-Type', 'application/json').set('Authorization','Bearer'+' '+GlobalService.authtoken);
  return this.http.post<any>('http://localhost:3000/employee/getdepartments/',null,{headers});
}

并在您的组件中订阅该可观察对象：

departments(){
  this.departmentsService.getdepartments().subscribe( data => this.dataout = data);
}

为什么我在 Angular 中不是在第一次点击而是在第二次点击时收到数据？

Why do I receive data not on 1st click but on 2nd click in Angular?

angular