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

getter和setter属性还提供了另一种方法来获取和设置视图中的数据

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

ngModel更改，不调用ngModelChange

3 个答案: