Angular 角度2-[（ngModel）]在[值]更改后不更新

我正在设置一个输入的值，计算另外两个NGModel，这似乎很好。但如果我检查我的NGM模型，它根本不会改变。让我告诉你：

<ion-item>
    <ion-label>Total price: {{product.totalPrice}}</ion-label>
    <ion-input 
        type="number"
        [value]="product.quantity * product.price"
        [(ngModel)]="product.totalPrice" 
        [ngModelOptions]="{ standalone: true }"></ion-input>
</ion-item>

总价：{{product.totalPrice}

所以这里

{{product.totalPrice}}

显示初始值，这很好。如果我手动更改该输入，更改将反映在表达式上，这也很好。但是该输入将是只读的，并且将通过更改另外两个输入来设置。当我更改它们时，我看到输入上的值正在正常更新，但标签中的表达式没有更新。怎么了

这真的很奇怪，因为输入中的值被更新了，而不是表达式

{{product.totalPrice}

，我猜值正在更新，因为其他字段都在更新，但是这些值的更改实际上从未影响到

ngModel

---

顺便说一句，我使用的是Ionic 2，实际上，

[]

意味着绑定数据，

（）

意味着从这个UI控件发出更改/或者用这些更改引发一个事件

。 所以

[（）]

并不意味着双向数据绑定。 这意味着：

• 使用

  []

• 提高输入更改

  （）

它显示了使用输入绑定数据的多种方法以及如何进行更改。

您可以尝试使用

（ngModelChange）

来有效地监视值更改并更新

产品。totalPrice

。看起来像这样

<ion-item>
    <ion-label>Total price: {{product.totalPrice}}</ion-label>
    <ion-input 
        type="number"
        [value]="product.quantity * product.price"
        [(ngModel)]="product.totalPrice" 
        [ngModelOptions]="{ standalone: true }"></ion-input>
        (ngModelChange)="product.totalPrice = $event"
</ion-item>

---

希望这会有所帮助。

我还遇到了一个问题，即在更改输入字段的输入时，双向绑定没有更新模型。在我的例子中，我发现绑定到的属性是只读属性。为了找到答案，我必须将双向绑定拆分：

[ngModel]="data.name" (ngModelChange)="testMethod($event)"

方法是：

testMethod($event) {data.name = $event}

---

然后我得到了只读的例外情况。

所以我知道我来晚了，但鉴于其他答案都不正确，我想我应该添加解决方案，以防其他人出现在这一页上

创建接受ngModel的自定义组件时，该组件必须实现ControlValueAccessor接口。具体内容如下

interface ControlValueAccessor {  
  writeValue(obj: any): void
  registerOnChange(fn: any): void
  registerOnTouched(fn: any): void
  setDisabledState(isDisabled: boolean): void
}

为了注册组件所做的更改，组件必须调用registerOnChange方法提供的onChange方法

例如，如果我们像这样注册onChange方法：

 onChange: any = () => { };
 registerOnChange(fn) {
   this.onChange = (obj) => fn(obj);
 }

当我们的组件对值进行更改时，我们必须执行以下行

this.onChange(this.value)

希望这有帮助

编辑

当我第一次回答这个问题时，出于某种原因，我的印象是自定义子组件没有更新父组件。现在重读一遍，似乎不是离子输入有问题，就是OP没有正确使用它

---

这个答案更适合创建一个组件，并让它使用NgModel更新其父组件的属性。ngModelChange也不起作用。这真的很奇怪，因为输入中的值被更新了，而不是表达式{{product.totalPrice}，我猜值正在更新，因为其他字段都在更新，但这些值的更改实际上从未影响到ngModelI。我更新了第二个示例我的答案。尝试添加ngModel exportAs属性语句并删除模板引用变量。这是假设该元素在某种类型的范围内，并且ngForm指令在起作用。让我知道这是否有效。是的，我知道，除此之外，在这里这是有效的，因为我刚刚编辑了文章，输入的[值]得到了成功更新，但这种更改从未影响到ngModel。如果我编辑输入，ngModel就会更新，这就是你展示给我的，有效的。但我需要它被其他输入更新，就像其他输入值变化的连续性一样。我认为你需要将totalPrice作为只读或计算属性来处理。。在这个例子中，我使用一种方法来计算总数。使用相同的方法，您可以设置totalPrice，更改将被广播到其他组件、表达式……我希望这会有所帮助！：）这实际上是更新父值的双向ngModel绑定的正确答案。您能否使用您的方法解决OP提出的问题，以说明OP将如何使用它？registerOnChange仅注册组件更改模型时要调用的函数。但是在这里，当父组件更改模型的值时，我们需要一些东西来更改模型。我的代码中也有同样的问题。我在组件中进行更改，它被应用。我在父组件中更改了模型，没有发生任何情况如果有帮助，请检查此项

this.onChange(this.value)