Angular 在组件中检索响应后，加载微调器未隐藏

我有一个包含身份验证模块的Angular应用程序。我目前正在处理注册组件，并希望包括一个加载微调器，默认情况下该微调器是隐藏的，然后在等待数据返回时显示

对于这个用例，我希望微调器在表单提交后启动，并在收到来自可观察对象的响应后隐藏

目前，除了微调器在收到响应后不隐藏外，其他一切都可以工作。我甚至可以看到我的标志isLoading变为false，但微调器一直在旋转

以下是我的注册组件代码： 注册.component.ts

这是我对应的模板： registration.component.html

---

您的组件正在使用推送更改检测，这意味着更改检测仅在输入更改或事件触发时运行。在订阅处理程序中设置加载不会导致更改检测周期。您可以在设置加载后注入ChangeDetectorRef并调用markForCheck以强制检查。

谢谢，我删除了推送式更改检测，它现在可以工作了。

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();
    }
}

<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>

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
            }
        );
    }
}