Angular 2 ngModel 双向绑定有时不起作用答案

【问题标题】：Angular 2 ngModel two-way binding sometimes not workingAngular 2 ngModel 双向绑定有时不起作用
【发布时间】：2017-10-20 01:06:00
【问题描述】：

我有一个对象，它带有一个绑定到文本区域的字符串变量。在（ngModelChange）中，我有一个函数可以在编辑字符串时检查字符串的长度，如果它太长，则将“先前值”分配给实际值。像这样：

t.value = t.previousValue;

这不起作用。当我调试时，我看到变量被分配并且一切看起来都很好，但是数据绑定没有更新。但是，如果我将 t.previousValue 更改为“test”，那么它会起作用并且 textarea 会更新。

t.value = "test";

有什么区别？

相关代码：

<textarea type="text" class="form-control" [(ngModel)]="t.value" (ngModelChange)="isOverflowing(t)"></textarea>

if (this.textArea.nativeElement.clientHeight < this.textArea.nativeElement.scrollHeight){
        if(t.value.length - t.previousValue.length > 1){
            t.value = t.previousValue;
        }else{
            t.value = t.value.substring(0,t.value.length-2);
        }
    }
    t.previousValue = t.value;

【问题讨论】：

您是说您在 ngOnChanges 中执行此操作？您应该小心，可能会发生不定式更改检查，因为值在更改检测过程中不断变化。
你能告诉我们你的视图和组件代码吗？
你能告诉我们$scope.$apply() 是否解决了它？您的代码不足以重现！
这是 Angular 2+，所以我认为我不能使用它

标签： angular data-binding angular2-forms

【解决方案1】：

如果您手动设置更改事件，则不应将香蕉盒与 ngModel 一起使用：

<textarea type="text" class="form-control" [(ngModel)]="t.value" (ngModelChange)="isOverflowing(t)"></textarea>

应该是：

<textarea type="text" class="form-control" [ngModel]="t.value" (ngModelChange)="isOverflowing(t)"></textarea>

请注意，ngModel 现在只绑定 1 种方式，而不是 2 种方式，因为您已将另一个绑定与 ngModelChange 挂钩。

看这里：

https://angular.io/docs/ts/latest/guide/template-syntax.html

【讨论】：

这是正确答案。不过，为了完成这项工作，我必须添加一条 else 语句，并在一切正常时进行实际分配。

【解决方案2】：

仅适用于初学者：如果您使用 [(ngModel)]="input" 功能，您的页面会隐藏那个时间：第一步：打开 app.module.ts-->import { FormsModule } from '@angular/forms'; 第二步：请参阅下面的示例页面，例如 app.module.ts 导入：[BrowserModule] 你应该像这样添加 FormsModule 导入：[BrowserModule,FormsModule]

然后立即运行您的应用......正在运行的应用......

【讨论】：