第二次点击提交才得到结果

Question

我正尝试在 angular 7 中执行更改密码功能，

从后端来看，如果当前密码不正确，它将return为真。

并且在angular端会出现错误信息。

但问题是我必须点击两次才能显示错误消息，即使我可以在打印真实值的日志中看到响应，但不确定为什么 *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

我怀疑你在组件装饰器中通过了changeDetection: ChangeDetectionStrategy.OnPush。在这种情况下，angular 将不会读取更改，直到下一个更改检测周期（在您的情况下发生在第二次单击时）。

为了解决这个问题，您需要在构造函数中注入 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 没有坏处，但解决此问题的另一种方法是使用可观察对象和 angular 异步管道。

  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>

Answer 2

这就是您遇到问题的原因

hasError: boolean;

您正在初始化变量，但在开始时没有给出任何值。所以一加载组件，hasError的值就是undefined/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.

第二次点击提交才得到结果

Getting result only when click submit for second time

rxjs

typescript

angular-services

angular

angular-changedetection