Question

我有一个组件如下：

import { Component, OnInit } from '@angular/core';

@Component({
    selector: 'app',
    moduleId: module.id,
    template: `
        <input [value]="a" (change)="onValidateOfA($event)" />
`,

})
export class AppComponent implements OnInit {

    a: number = 10;

    constructor() { }

    ngOnInit() {
    }

    onValidateOfA(e: any) {
        let t = e.target.value * 1;
        if (t < 10) {
            t = this.a;
        }
        this.a = t;
    }
}

逻辑很简单。当用户键入任何小于10的值时，我想切换到文本框中的上一个值。值在变量“a”中更改，但不会反映在文本框中（使用属性绑定）。文本框中的值并不总是在'a'中表示相同的值（或者在这种情况下如何强制使用）。

我正在学习Angular中的检测更改，并希望使用它来解决问题，而不是尝试以一种非常不同的方法解决问题。

我试图遵循以下提到的所有内容：

但没有运气或我遗漏了一些东西（没有错误，只是同样的问题）。

Answer 1

如果你的代码在Angular上下文之外执行，例如setTimeout() {}，你可以这样做：

public ngZone: NgZone

然后您想要立即应用于角度的任何代码：

this.ngZone.run(() => { 
  //Code here...
});

说实话，在这种情况下你不应该需要它。

Answer 2

这里的问题不是改变检测。您可以通过在<input>旁边添加插值来验证这一点，以回显this.a的值：

Value: {{ a }}<br />
<input [value]="a" (change)="onValidateOfA($event)" />

当a通过验证并且字段散焦时，值会明确更新。那么为什么不进行现场更新？

这是因为HTML表单的实现方式。 Angular使用FormsModule与这样的表单进行交互，但快速解决方法是直接设置值：

onValidateOfA(e: any) {
    let t = e.target.value * 1;
    if (t < 10) {
        t = this.a;
    }
    this.a = t;
    e.target.value = t;
}

更好的方法是使用FormsModule并添加一个间接层。在这里查看plunker：

https://plnkr.co/edit/b8D3rMpFaw1oTmrGirDW?p=preview

我们在这里做的是跟踪rawFoo和validatedFoo。 validatedFoo始终有效，但rawFoo使用ngModel与表单双向绑定。

以下是来自Angular文档的ngModel的进一步阅读：

https://angular.io/guide/forms

顺便说一句，＆＃39;权利＆＃39;这样做的方法是使用自定义字段验证器，在Angular文档中进行了解释：

https://angular.io/guide/form-validation#custom-validators

基本前提是您编写的函数对有效输入返回null，否则返回描述性对象。然后添加一些视图逻辑，让用户知道值是错误的，而框架负责将所有内容保持在有效状态。

如何强制角度变化检测2 +

2 个答案: