web-dev-qa-db-ja.com

Angular 2-[（ngModel）] [value]の変更後に更新されない

他の2つの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になり、他の2つの入力を変更することで設定されます。それらを変更すると、入力の値は正常に更新されますが、ラベルの式は更新されません。どうしたの？

入力GETSの値は更新されますが、式{{product.totalPrice}}ではなく、他のフィールドは更新されていると思いますが、これらの値の変更が実際にngModelにヒットすることはありません。

ところで、私はIonic 2

angulartypescriptionic2ngmodel
11
Agustín

実際に_[]_はデータをバインドすることを意味し、_()_は変更を発行することを意味します/または、このUIコントロール_<ion-input>_からこれらの変更を伴うイベントを発生させます。したがって、[()]は双方向のデータバインディングを意味しません。その意味は：

  • _[]_を使用してデータをバインドします
  • 入力の変更を上げる_()_。

この例を確認してください 入力とデータをバインドする多くの方法と、変更を起こす方法を示しています。

11
bunjeeb

だから、私はパーティーに遅れていることを知っていますが、他の答えがどれも正しいとは思わないので、他の誰かがこのページで終わる場合に解決策を追加すると思いました。

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)

これが役に立てば幸いです。

6
Lewis Campbell

(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"でラップされている場合、 テンプレート参照変数 を使用し、代わりにラベルで使用できます。このようなもの：

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

これがお役に立てば幸いです。

4
Alexander Staroselsky

また、入力フィールドの入力を変更するときに、双方向バインディングがモデルを更新しなかったという問題に遭遇しました。私の場合、バインドしているプロパティが読み取り専用プロパティであることがわかりました。これを見つけるには、双方向バインディングを分割する必要がありました。

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

およびメソッド：

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

その後、読み取り専用の例外が発生しました。

4
Gerros