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

Question

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

t.value = t.previousValue;

这是行不通的。当我调试时，我看到正在分配变量，一切看起来都很好，但数据绑定没有更新。但是，如果我将 t.previousValue 更改为 "test"，那会起作用并且文本区域会更新。

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;

Answer 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

Answer 2

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

然后运行您的应用程序..正在运行的应用程序...

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

Angular 2 ngModel two-way binding sometimes not working

data-binding

angular2-forms

angular