Angular 如何显示api请求的加载按钮[已解决]

显然，我希望有一个定制的按钮，在我提交表单数据时加载并显示加载，然后在表单提交加载停止后，在我需要的每个地方显示该按钮

当用户单击按钮时，我想在按钮中显示加载循环，对于每个按钮单击，我发送相关的输入值，http请求显示加载

现在我使用的一种方法是为每个按钮声明一个布尔变量，以便在发送请求前后进行更改

showLoading: boolean = false;

userClick() {
  this.showLoading = true;
  // send http request here
  this.showLoading = false;
}

在组件html模板中，使用此布尔变量显示或隐藏加载循环

<span *ngIf="showLoading" class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>

管理所有状态的一个想法是在一个对象中定义布尔值，例如

按钮加载={ 第一次加载：错误， secoundLoading:错误 }

---

对于更多情况，您是否有任何

您可以做的是，在订阅发出请求的服务方法后，将showLoading设置为false。您需要通过返回可观察值来等待响应

HTTP请求是异步的，因此我们必须在subscribe块内将其设置为false，而不是在subscribe块外

showLoading: boolean = false;

userClick() {
  this.showLoading = true;
  this.sampleService.getDate().subscribe(response => {
    // once response is returned,
    this.showLoading = false;
  });
}

---

您应该创建包含按钮和加载元素的loadingButton.component

然后，您应该在loadingButton.component中创建一个函数，用于获取url、数据和 方法

通过定义的ViewChild，可以调用此函数

---

简单：

订阅http请求并禁用那里的加载栏。。。或者编写http拦截器，该拦截器将处理所有请求。现在，我可以改进并将此组件作为模块共享给其他人；谢谢我的请求工作正常，但我想有一个方法在响应后禁用每个按钮的加载。@AliZareshahi这就是我的代码所做的。由于已经将微调器绑定到ngIf条件，因此在触发userClick时将有条件地呈现微调器。