Angular，订阅和变量更新

Question

研究Angular我发现了这个问题：当我进行订阅并且从后端收到错误时，它正确地进入了 ERR 部分，并在控制台中打印“失败”，但它只在我第二次调用它时改变了一个布尔值。

这是我的代码：

模板：

{{isAlreadyRegistered}}

<alert *ngIf="isAlreadyRegistered">
  User already registered.
</alert>
...
<div [formgroup]="registerForm">
...
<button (click)="register()">Save</button>

我是 TS:

registerForm: FormGroup;
isAlreadyRegistered: boolean = false;

...

register(): void{
this.service.SignUp({body: User}).subscribe(
  (res) => {console.log('success')},
  (ERR) => {
  this.isAlreadyRegistered = true;
  console.log('fail', ERR);
  } 
);
}

我在第一行插入了布尔变量以了解它是如何工作的。因此，为了显示 <alert> 部分并让内插布尔值发生变化，我必须按两次“保存”按钮。而且我确定它进入了 ERR 部分，因为它在控制台中打印了两次 'fail'。

我试着让它成为一个 Observable 而不是布尔值，但它仍然只在我第二次按下它时有效。

所以，我的问题是：为什么它在我第一次按下按钮时不更改布尔值，而是打印控制台日志？以及为什么第二次它能正常工作？

谢谢！

Answer 1

试试这个：

将 ChangeDetectorRef 注入构造函数

import { ChangeDetectorRef } from '@angular/core';

  constructor(
    ...
    private cd: ChangeDetectorRef,
  ) { }

并将this.cd.markForCheck();添加到注册方法

register(): void{
  this.service.SignUp({body: User}).subscribe(
    (res) => {console.log('success')},
    (ERR) => {
      this.isAlreadyRegistered = true;
      console.log('fail', ERR);
      this.cd.markForCheck();
  } 
 );
}

希望这能解决您的问题。

Angular，订阅和变量更新

Angular, subscription and variable update

angular

formgroups