ngModel 改变，ngModelChange 没有被调用答案

【问题标题】：ngModel changes, ngModelChange is not calledngModel 改变，ngModelChange 没有被调用
【发布时间】：2017-02-09 02:00:15
【问题描述】：

<input type="number" style="width: 100px" [(ngModel)]="trait.userMinimum" (ngModelChange)="setThresholds()">

模型被下面的代码改变并反映在屏幕上，但没有调用 ngModelChange。我希望它被调用，无论它在其他地方被更改，或者是一个属性或任何原因。如果模型发生变化，它会调用 ngModelChange。

  <p-slider [(ngModel)]="trait.userMinimum" 
    [style]="{'width':'100%'}" 
    [min]="trait.min"
    [max]="trait.max"
    class="ui-g-8"></p-slider>
  <span class="ui-g-2">{{trait.max}}</span>

为了阐明 ngModel 按预期工作，我移动滑块以改变数字，输入滑块改变的数字。唯一不起作用的是滑块更改并且模型更改未在输入中调用。

【问题讨论】：

你应该使用DoCheck以防onChange不触发。 angular.io/docs/ts/latest/guide/lifecycle-hooks.html#!#docheck
嗯，我试过了，但效果极差
请创建 plunker 来演示您的问题
@ZackLucky，你发现这有什么问题吗？我陷入了类似的境地
@RumitParakhiya 我认为大卫的回答为我解决了这个问题，拆分了 getter 和 setter

标签： angular

【解决方案1】：

//This is a **two way** binding, so below code will not take effect
[(ngModel)]="trait.userMinimum"  
(ngModelChange)="setThresholds()" //This will not be fired

解决办法是改成如下，去掉“()”，让get和set分开：

[(ngModel)]="trait.userMinimum" ---> [ngModel]="trait.userMinimum"

【讨论】：

没办法，我想知道这是否可行，那么我只需要执行 (ngModel)="setThresholds()" 来调用该方法吗？
不工作我有完全相同的代码：<TextField hint="hhint" [ngModel]="con_no1" (ngModelChange)="saverange($event)"</TextField> 然后在类private con_no1: any;saverange(newValue) {console.log(newValue);}
不工作同样的问题@ishandutta2007 你找到任何解决方案了吗

【解决方案2】：

[(ngModel)] 用于视图和组件的双向绑定，如要使用ngModuleChange，我们需要拆分它[()]（香蕉放入盒子）比它成为 Property Binding [] 和 Event Binding em> ()

component.html

里面

<input type="number" placeholder="Enter number" 
   style="width: 100px"
  [ngModel]="trait.userMinimum" 
 (ngModelChange)="setThresholds($event)"/>

在 component.ts 文件中，我们需要使用这些setThresholds 方法从Editext 获取值，如下所示

 setThresholds(getValue)
 {
   console.log(getValue)     
         /**
         * DO YOUR LOGIC HERE
         */
 }

getter 和 setter 属性还可以使用另一种方法从视图中获取和设置数据

【讨论】：

【解决方案3】：

这需要更像是一个评论，但把它作为一个答案，使它更明显。我得到了同样的错误，但不幸的是上面的答案没有奏效。控制台中还有一个错误，我之前忽略了 ERROR Error: If ngModel is used within a form tag, either the name attribute must be set or the form control must be defined as 'standalone' in ngModelOptions. 修复此问题导致问题得到修复。

简而言之，我所做的就是在输入中添加一个名为 name 的附加属性。

<input type="number" name="userMinimum" [(ngModel)]="trait.userMinimum" class="form-control"  (ngModelChange)="setThresholds($event)">

【讨论】：

【解决方案4】：

如果不想拆分[(ngModel)]，可以使用标准的(input)事件。

虽然您无法获得完整的输入值，但它非常适合附加操作。

【讨论】：