只在第二次点击提交时获取结果

Question

我正在尝试更改角7的密码功能，

从后端端，如果当前密码不正确，它将返回true。

在角度侧，将显示错误消息。

但问题是我必须点击两次显示错误信息，甚至我可以看到日志打印真实值的响应，但不确定为什么*ngif不工作

模板侧

    <span *ngIf="hasError">
         wrong current password value  
    </span>

我的组件方面

hasError: boolean;

 submit () {
     this.apiService
    .changePassword(this.formGroup.value).subscribe(res => {
  console.log(res);
  this.hasError = res;    });

服务方

  changePassword(body: any){
     return this.http.post<any>(this.url + 'changePassword', body);
  }

有人能解释一下为什么我必须点击提交按钮两次才能显示html元素吗

谢谢

Answer 1

这就是你问题的原因

hasError：布尔值；

您正在启动变量，但在开始时没有给出任何值。因此，一旦加载了组件，hasError的值就会变为未定义/null。因此，它将只加载具有该值的模板。

如何防止这种情况：

方法1）（非首选）

// If you dont want to initiate the value in the component.ts file, make this change in 
  the HTML file, 

<span *ngIf="!!hasError">
         wrong current password value  
</span>


the '!!' will check for null status of the variable 

方法2）首选

// Initiate the value of the variable to false, 

// In component.ts file

hasError: boolean = false; // IMPORTANT

and then your code remains the same. 

So the initial value will now be false, and also when the service is subscribed, you can have it true or false and your HTML also remains the same. 

Answer 2

我怀疑您通过了changeDetection:ChangeDetectionStrategy。组件装饰器中的OnPush。在这种情况下，直到下一个变化检测周期（在您的情况下，在第二次单击时发生）时，角度传感器才会读取变化。

为了解决这个问题，您需要在构造函数中注入ChangeDetectorRef，并手动调用更改检测周期。类似的东西：

  constructor(private cdr: ChangeDetectorRef) {}
  
  hasError: boolean;

  submit () {
     this.apiService
    .changePassword(this.formGroup.value)
    .subscribe(res => {
       console.log(res);
       this.hasError = res;    
       this.cdr.markForCheck();  // <<<---- detect changes
  });

虽然使用ChangeDetectorRef没有坏处，但解决这个问题的另一种方法是使用可观测数据和角异步管道。

  hasError$: new Subject();

  submit () {
    this.apiService
    .changePassword(this.formGroup.value)
    .subscribe(res => this.hasError$.next(res));

在模板中：

  <span *ngIf="hasError$ | async">
       wrong current password value  
  </span>