ngModel更改，不调用ngModelChange

Question

<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可以正常工作，我将滑块更改的数字移动了，键入了滑块更改的数字。唯一不起作用的是滑块更改，并且未在输入中调用模型更改。

Answer 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"

Answer 2

[(ngModel)]用于双向绑定，例如从视图和组件到视图和组件，要使用它，ngModuleChange我们需要将其拆分为[()]（香蕉放入盒子中），然后将其变为属性绑定 []和事件绑定 ()

在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
         */
 }

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