Question

我使用firebase和angular 2+。在我的应用程序中，我有一个登录页面。当我单击“登录”按钮时，微调器正在加载，成功后应该为false，但不会更新。为什么？

模板

<div class="sign-in-form-buttons-section">
  <div>{{isLoadingInProgress}}</div>
  <button
    *ngIf="!isLoadingInProgress; else loading"
    mat-raised-button
    color="primary"
    (click)="onSignInClicked()"
  >
    Sign In
  </button>
  <ng-template #loading>
    <mat-spinner></mat-spinner>
  </ng-template>
</div>

控制器

public signInFormGroup: FormGroup;
public isLoadingInProgress: boolean = false;

constructor() {
  this.signInFormGroup = new FormGroup({
    email: new FormControl(''),
    password: new FormControl(''),
  });
}

public onSignInClicked(): void {
  this.isLoadingInProgress = true;

  const signInInfo: SignInInfo = {
    email: this.signInFormGroup.value.email,
    password: this.signInFormGroup.value.password
  };

  this.authService.signInWithEmailAndPassword(
    signInInfo.email,
    signInInfo.password,
  )
  .then(() => {
    this.isLoadingInProgress = false;
  })
  .catch(error => {
    this.snackBarService.showSnackBar(error.message);
    this.isLoadingInProgress = false;
  });
}

Answer 1

是的，这是因为Angular不会检查每个非局部变量的性能问题。对于Http请求，Angular无法在一个进程/线程中检测到。

解决方案： 您可以使用RxJS BehaviorSubject方法。

例如：

您可以尝试使用以下这些文件。

loader.service.ts

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';

@Injectable()
export class LoaderService {
  public status: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);

  display(value: boolean) {
  console.log('LoaderService.display ' + value);
  this.status.next(value);
  }
}

loader.component.ts

import {Component, OnInit} from '@angular/core';
import {LoaderService} from './loader.service';

@Component({
    selector: 'app-loader',
    templateUrl: 'loader.component.html',
    providers: [LoaderService]
})

export class LoaderComponent implements OnInit {
    isLoading: boolean;

    constructor(private loaderService: LoaderService) {
    }

    ngOnInit() {
        this.loaderService.status.subscribe((val: boolean) => {
            this.isLoading = val;          // <--- Important Block
        });
    }

    submitData() {
        this.loader.display(true);      // <--- Loader true,BehaviorSubject True.
        this.http
          .post("http://localhost:3000/login", this.loginForm.value).then(data => {
            this.loader.display(false);
          })
          .catch(err => {
                console.log(err);
                this.loader.display(false); // <--- Loader Flase,BehaviorSubject False.
          });
          this.loader.display(false);
    }
}

loader.component.html

<div class="loader" *ngIf="isLoading"></div>

它为我工作，而且许多有角度的开发人员都以这种方式使用 BehaviorSubject 。希望对您有所帮助。

Answer 2

来自pip3 list docs：

如果一个或两个自变量被省略或提供了非功能，那么Promise.prototype.then()将缺少处理程序，但不会生成任何处理程序错误。

尝试将参数传递给then回调函数。

then

为什么不更新变量？

2 个答案: