Question

我使用这些角度版本：

@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>

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

这是我当前控制器的一个小摘要：

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
      ...
    });
  }

}

我定制了星云包认证，但问题在于我对Angular 2的部分缺乏了解。

我的问题是：

为什么在控制器上更改变量后，模板上的变量提交没有更新？
如果点击任何表单输入，为什么变量会更新？

当我尝试登录时，直到响应返回，该按钮被禁用，并且还添加了一个类，因此按钮＆＃34;闪烁＆＃34;。

问题是，如果我点击任何输入表单然后输出 <，那么类和禁用属性都不会更新，因为变量提交只会更新/ p>

我需要知道我是否以错误的方式链接变量，或者我需要触发与$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]不动态更新

1 个答案: