在组件中检索到响应后，加载微调器未隐藏
Posted
技术标签:
【中文标题】在组件中检索到响应后，加载微调器未隐藏【英文标题】：Loading spinner is not hiding after response is retrieved in component 【发布时间】：2020-09-18 12:57:59 【问题描述】：我有一个包含身份验证模块的 Angular 应用程序。我目前正在研究注册组件，并希望包含一个加载微调器，默认情况下它是隐藏的，然后在等待数据返回时显示。
对于这个用例，我希望微调器在提交表单后启动，并在收到来自 observable 的响应后隐藏。
目前，除了微调器在收到响应后不会隐藏之外，一切正常。我什至可以看到我的标志 isLoading 更改为 false 但微调器一直在旋转。
这是我的注册组件代码：
registration.component.ts
import ChangeDetectionStrategy, Component, OnInit from '@angular/core';
import NgForm from '@angular/forms';
import AuthService from '@modules/auth/services';
@Component(
selector: 'sb-register',
changeDetection: ChangeDetectionStrategy.OnPush,
templateUrl: './register.component.html',
styleUrls: ['register.component.scss'],
)
export class RegisterComponent
isLoading = false;
constructor(private authService: AuthService)
// ngOnInit()
onSubmit(form: NgForm)
if (!form.valid)
return;
const firstName = form.value.firstName;
const lastName = form.value.lastName;
const email = form.value.email;
const password = form.value.password;
this.isLoading = true;
this.authService.signup(firstName, lastName, email, password).subscribe(
resData =>
console.log(resData);
this.isLoading = false;
console.log(this.isLoading);
,
error =>
console.log(error);
this.isLoading = false;
);
form.reset();
这是我对应的模板：
registration.component.html
<sb-layout-auth>
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-7">
<div class="card shadow-lg border-0 rounded-lg mt-5">
<div class="card-header">
<h3 class="text-center font-weight-light my-4">Create Account</h3>
</div>
<div class="card-body">
<div *ngIf="isLoading" style="text-align: center;">
<sb-loading-spinner></sb-loading-spinner>
</div>
<form #authForm="ngForm" (ngSubmit)="onSubmit(authForm)" *ngIf="!isLoading">
<div class="form-row">
<div class="col-md-6">
<div class="form-group"><label class="small mb-1" for="inputFirstName">First
Name</label>
<input
class="form-control py-4"
id="firstName"
type="text"
placeholder="Enter first name"
ngModel
name="firstName"
required
/>
</div>
</div>
<div class="col-md-6">
<div class="form-group"><label class="small mb-1" for="inputLastName">Last
Name</label>
<input
class="form-control py-4"
id="lastName"
type="text"
placeholder="Enter last name"
ngModel
name="lastName"
required
/>
</div>
</div>
</div>
<div class="form-group"><label class="small mb-1"
for="inputEmailAddress">Email</label>
<input
class="form-control py-4"
type="email"
aria-describedby="emailHelp"
placeholder="Enter email address"
type="email"
id="email"
class="form-control"
ngModel
name="email"
required
email
/>
</div>
<div class="form-row">
<div class="col-md-6">
<div class="form-group"><label class="small mb-1"
for="inputPassword">Password</label>
<input
class="form-control py-4"
type="password"
placeholder="password"
type="password"
id="password"
ngModel
name="password"
required
minlength="6"
placeholder="Enter password"
/>
</div>
</div>
<div class="col-md-6">
<div class="form-group"><label class="small mb-1" for="inputConfirmPassword">Confirm
Password</label>
<input
class="form-control py-4"
type="password"
placeholder="Confirm password"
type="password"
id="confirm_password"
ngModel
name="confirm_password"
required
minlength="6"
placeholder="Enter password"
/>
</div>
</div>
</div>
<div class="form-group mt-4 mb-0">
<!-- <a class="btn btn-primary btn-block" -->
<button
class="btn btn-primary btn-block"
type="submit"
[disabled]="!authForm.valid"
>Create Account
</button>
<!-- routerLink="/dashboard">Create Account</a></div> -->
</div>
</form>
</div>
<div class="card-footer text-center">
<div class="small"><a routerLink="/auth/login">Have an account? Go to login</a></div>
</div>
</div>
</div>
</div>
</div>
</sb-layout-auth>
这也是我的身份验证服务，它生成了 observable：
auth.service.ts
从'@angular/core'导入可注射；
从 '@angular/common/http' 导入 HttpClient ;
interface AuthResponseData
status: string,
res: string,
message: string
@Injectable( providedIn: 'root' )
export class AuthService
constructor(private http: HttpClient)
signup(firstName: string, lastName: string, email: string, password: string)
return this.http.post<AuthResponseData>(
'http://localhost:5000/v1/auth/register',
firstName: firstName,
lastName: lastName,
email: email,
password: password
);
login(email: string, password: string)
return this.http.post<AuthResponseData>(
'http://localhost:5000/v1/auth/login',
email: email,
password: password
);
【问题讨论】：
【参考方案1】：您的组件正在使用 On Push 更改检测，这意味着更改检测只会在 Inputs 更改或触发事件时运行。在订阅处理程序中设置loading 不会导致更改检测周期。您可以在设置加载后注入ChangeDetectorRef 并调用markForCheck() 以强制检查。
【讨论】：
谢谢，我删除了On Push change detection，现在可以使用了。以上是关于在组件中检索到响应后，加载微调器未隐藏的主要内容，如果未能解决你的问题，请参考以下文章
Angular-RxJS- 在长 API 调用中间隐藏微调器并继续 API 调用