17

我正在设置计算其他两个 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}}显示了初始值，这很好。如果我手动更改该输入，更改将反映在表达式上，这也很好。但是该输入将是readonly并且将通过更改其他两个输入来设置。当我更改它们时，我看到输入上的值更新得很好，但标签中的表达式却没有。那里有什么问题？

这真的很奇怪，因为输入GETS UPDATED中的值，但不是表达式{{product.totalPrice}}，我猜该值正在更新，因为其他字段是，但这些值更改从未真正命中ngModel

顺便说一句，我正在使用 Ionic 2

4

4 回答 4

14

实际上[]意味着绑定数据并()意味着发出更改/或者说通过这些更改从这个 UI 控件引发一个事件<ion-input>。所以[()]并不意味着双向数据绑定。它的意思是：

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

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

于 2017-01-11T22:20:12.800 回答
12

所以我知道我迟到了，但看到其他答案都不正确，我想我会添加解决方案，以防其他人最终出现在此页面上。

创建接受 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 更新其父级的属性

于 2017-10-03T20:28:17.493 回答
5

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

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

和方法：

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

然后我得到了只读异常。

于 2017-07-23T13:50:14.040 回答
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>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>

希望这会有所帮助。

于 2017-01-11T22:24:19.907 回答