Angular 2: [ngclass] 和 [disabled] 没有动态更新

Question

我正在使用这些 angular 版本：

@angular/animations: 4.4.6
@angular/common: 4.4.6
@angular/compiler: 4.4.6
@angular/core: 4.4.6
@angular/forms: 4.4.6
@angular/http: 4.4.6
@angular/platform-browser: 4.4.6
@angular/platform-browser-dynamic: 4.4.6
@angular/router: 4.4.6
@angular/cli: 1.4.9
@angular/compiler-cli: 4.4.6
@angular/language-service: 4.4.6
typescript: 2.3.4

我有这个问题，我有一个这样的按钮：

<button 
    [disabled]="submitted || !form.valid" 
    class="btn btn-block btn-hero-success"
    [ngClass]="{'btn-pulse': submitted}">
          Sign In
</button>

我的问题是当我在控制器上更新变量 submitted 时，除非我单击一个输入，否则它不会在模板上更新。

这是我当前控制器的一个小总结：

export class NbLoginComponent {
  errors: string[] = [];
  messages: string[] = [];
  user: any = {};
  submitted: boolean = false;
  @ViewChild('form') form;

  constructor(protected service: NbAuthService,
              @Inject(NB_AUTH_OPTIONS_TOKEN) protected config = {},
              protected router: Router) {
   ....
   ....
  }

  login(): void {
    this.errors = this.messages = [];
    this.submitted = true;

    this.service.authenticate(this.provider, this.user).subscribe((result: NbAuthResult) => {
      this.submitted = false; // <-- I updated submitted variable here
      ...
    });
  }

}

我正在自定义 nebular 包身份验证，但问题是我对 Angular 2.

的部分缺乏理解

我的问题是：

为什么我在控制器上更改变量 submitted 后没有立即在模板上更新它？
为什么单击任何表单输入时变量都会更新？

当我尝试登录时，直到响应返回，该按钮被禁用并且还添加了一个 class，因此按钮 "blinks"。

问题是 class 和禁用的属性都没有更新，因为变量 submitted 只有在我 时才会更新单击任何输入表单，然后超出输入

我需要知道我是否以错误的方式链接了变量，或者我需要触发类似于 $scope.apply 的东西。

我尝试在变量提交更新后使用ApplicationRef.tick()，但没有任何反应

Answer 1

我将这 3 行添加到我的代码中解决了这个问题：

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

// Add ChangeDetectorRef to constructor
constructor(private cd: ChangeDetectorRef) {}

// Call markForCheck at the end of the subscribe function
this.cd.markForCheck();

我的组件结束的样子

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

export class NbLoginComponent {
  errors: string[] = [];
  messages: string[] = [];
  user: any = {};
  submitted: boolean = false;
  @ViewChild('form') form;

  constructor(
       private cd: ChangeDetectorRef, // <-----
       protected service: NbAuthService,
       @Inject(NB_AUTH_OPTIONS_TOKEN) protected config = {},
      protected router: Router) {
   ....
   ....
  }

  login(): void {
    this.errors = this.messages = [];
    this.submitted = true;

    this.service.authenticate(this.provider, this.user).subscribe((result: NbAuthResult) => {
      this.submitted = false;
      this.cd.markForCheck(); // <----
    });
  }

}

在订阅方法结束时调用this.cd.markForCheck();后，HTML被正确更新

Angular 2: [ngclass] 和 [disabled] 没有动态更新

Angular 2: [ngclass] and [disabled] not updating dynamically

typescript

angular2-forms

angular