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>使用这些更改引发事件。所以[()]并不意味着双向数据绑定。这意味着：

使用[]
提高输入更改()。

Check this example它显示了许多将数据与输入绑定以及如何引发更改的方法。

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

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

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

和方法：

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

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

Answer 4

您可以尝试使用(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>元素和ngForm exportAs #someForm="ngForm"中，则可以使用template reference variable并在标签中使用该元素。像这样：

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

希望这有帮助。

Angular 2 - [（ngModel）]在[value]更改后不更新

4 个答案: