Angular 2 - [(ngModel)]在[value]更改后不更新

Question

我正在设置计算其他两个ngModel的输入值,这似乎工作正常.但是,如果我检查我的ngModel,它根本不会改变.让我演示给你看:

<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}}显示初始值,这很好.如果我手动更改输入,更改将反映在表达式上,这也没关系.但是这个输入将是只读的,它将由changin另外两个输入设置.当我更改它们时,我看到输入上的值正在更新,但不是标签中的表达式.那有什么不对？

这真的很奇怪,因为输入GETS UPDATED中的值,而不是表达式{{product.totalPrice}},我想这个值正在更新,因为其他字段是,但这些值更改从未实际触及ngModel

顺便说一下,我正在使用Ionic 2

Answer 1

实际上[]意味着绑定数据和()意味着发出更改/或者说让这些更改形成此UI控件的事件<ion-input>.所以[()]并不意味着双向数据绑定.它的意思是:

• 使用绑定数据 []
• 提高输入变化().

检查此示例,它显示了将数据与输入绑定以及如何引发更改的多种方法.

Answer 2

所以我知道我迟到了,但看到其他答案都不正确,我想我会添加解决方案以防其他人在这个页面上结束.

创建接受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)

希望这会有所帮助.

Answer 3

您可以尝试使用(ngModelChange)有效地监视值变化并更新product.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>

如果此元素包装在<form>element 和 ngForm exportAs中#someForm="ngForm"，您可以使用模板引用变量并在标签中使用它。像这样的东西：

<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 }"
        name="totalPrice"
        #totalPrice="ngModel"></ion-input>
</ion-item>

希望这有帮助。

Answer 4

我还遇到了双向绑定在更改输入字段的输入时没有更新模型的问题。就我而言，我发现我绑定的属性是只读属性。为了找到这一点，我不得不拆分双向绑定：

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

和方法：

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

然后我得到了只读异常。