（変更）vs（ngModelChange）in angular

326

Angular 1はonchange()イベントを受け付けず、イベントのみを受け付けng-change()ます。

一方、Angular 2は両方(change)と(ngModelChange)イベントを受け入れますが、どちらも同じことをしているようです。

違いは何ですか？

どちらがパフォーマンスに最適ですか？

ngModelChange：

<input type="text" pInputText class="ui-widget ui-text"
    (ngModelChange)="clearFilter()" placeholder="Find"/>

対変化：

<input type="text" pInputText class="ui-widget ui-text" 
    (change)="clearFilter()" placeholder="Find"/>

— ラメシュ・ラジェンドラン
ソース

2

それらを比較したくない。どれがパフォーマンスに最適か知りたいだけですか？

— Ramesh Rajendran 2017年

6

ええ、比較はありません。ngModelを使用している場合は、後者を使用できます。それ以外の場合は、最初のモデルを使用できます。それは双方向のデータは、パフォーマンスのためので、悪い結合だとして、その常にngModelを避けることが好ましい

— Vamshi

2

主観を削除するために「違いは何ですか」と「パフォーマンスが高い」に重点を置いて編集し、投票を再開するよう投票しました。

— ルフィン

12

Angular 7では、[（ngModel）] = "value"にバインドされた値が変更される前に（ngModelChange）= "eventHandler（）"が起動し、（change）= "eventHandler（）"がバインドされた値が起動した後[（ngModel）] = "value"が変更されました。

— CAK2 2018

4

ちなみに、（変更）イベントは、フォーカスが入力から離れたときにのみ発生します。キーを押すたびにイベントを発生させたい場合は、（入力）イベントを使用できます。

— John Gilmer、

496

(change) 従来の入力変更イベントにバインドされたイベント。

https://developer.mozilla.org/en-US/docs/Web/Events/change

入力にモデルがない場合でも、イベントを使用（変更）できます。

<input (change)="somethingChanged()">

(ngModelChange)ある@OutputngModelディレクティブのは。モデルが変更されたときに発生します。ngModelディレクティブなしでこのイベントを使用することはできません。

https://github.com/angular/angular/blob/master/packages/forms/src/directives/ng_model.ts#L124

ソースコードでさらに発見(ngModelChange)すると、新しい値が出力されます。

https://github.com/angular/angular/blob/master/packages/forms/src/directives/ng_model.ts#L169

だからそれはあなたがそのような使用法の能力を持っていることを意味します：

<input (ngModelChange)="modelChanged($event)">

modelChanged(newObj) {
    // do something with new value
}

基本的には大きな違いはないようですがngModel、を使うとイベントが威力を発揮します[ngValue]。

  <select [(ngModel)]="data" (ngModelChange)="dataChanged($event)" name="data">
      <option *ngFor="let currentData of allData" [ngValue]="currentData">
          {{data.name}}
      </option>
  </select>

dataChanged(newObj) {
    // here comes the object as parameter
}

「ngModel物」を使わずに同じことをしようとする

<select (change)="changed($event)">
    <option *ngFor="let currentData of allData" [value]="currentData.id">
        {{data.name}}
    </option>
</select>

changed(e){
    // event comes as parameter, you'll have to find selectedData manually
    // by using e.target.data
}

— オメラルパー
ソース

1

ngmodelオブジェクトで変更イベントを使用している場合はどうなりますか？

— Ramesh Rajendran 2017

6

@RameshRajendran答えを改善しました。ngModelオブジェクトで変更イベントを引き続き使用できますが、変更イベントはイベントパラメーターを渡し、ngModelChangeイベントは新しい値を渡します。

— omeralper 2017

1

うん+1。しかし、ctr + Aを使用してテキストボックスからすべての値をクリアすると、ngmodelchangeはトリガーしません。

— Ramesh Rajendran 2017

6

<input (ngModelChange)="modelChanged($event)">正しくない、[ngModel]必須です。

— e-cloud

3

何か、あなたはすることができません、(change)この場合、あなたはすることができます(onClick)="yourFunction(youParameter)"

— jpmottin

83

角度7では、(ngModelChange)="eventHandler()"発火する前にバインドされた値が[(ngModel)]="value"中に変更された(change)="eventHandler()"意志の火災後にバインドされた値が[(ngModel)]="value"変更されます。

— CAK2
ソース

1

Angular 7.1でテストしたところ、イベントが呼び出される前にngModelの値が更新されました。それが私が使うものです

— Jahrenski '

角度6でも機能しました。私の時間を節約するための+1 :)

— Hemadri Dasari

1

それは逆ではないですか？Angular Docsによると、ngModelChangeビューモデルの更新後に発生します。

— 怒り

3

角度の最新のドキュメントでは、この場合について説明されていますangular.io/guide/...

— pioro90

4

実際、Angular 7.2では、値が変更される前と変更された後に(ngModelChange)イベントが発生します。情報をありがとう、とても役に立ちました！(change)

— Dennis Ameling、

15

私が別のトピックで見つけて書いたように-これは角度<7に適用されます（7+でどのようになっているかはわかりません）

未来のために

これ[(ngModel)]="hero.name"は、次のように脱糖できるショートカットにすぎないことに注意する必要があります[ngModel]="hero.name" (ngModelChange)="hero.name = $event"。

したがって、コードを砂糖抜きすると、次のようになります。

<select (ngModelChange)="onModelChange()" [ngModel]="hero.name" (ngModelChange)="hero.name = $event">

または

<[ngModel]="hero.name" (ngModelChange)="hero.name = $event" select (ngModelChange)="onModelChange()">

上記のコードを調べると、2つのngModelChangeイベントが発生し、それらを特定の順序で実行する必要があることがわかります。

まとめ：の前に配置すると、新しい値としてが取得されますが、モデルオブジェクトは以前の値を保持します。ngModelChangengModel$event の後ngModelに配置すると、モデルにはすでに新しい値が設定されています。

ソース

— 災害
ソース

これを指摘してくれてありがとう！私はあなたの説明が見つかるまでこの問題を抱えていました

— オモスタン

2

1- (change) HTML onchangeイベントにバインドされています。HTML onchangeに関するドキュメントには次のように書かれています：

ユーザーが<select>要素の選択されたオプションを変更したときにJavaScriptを実行する

ソース：https : //www.w3schools.com/jsref/event_onchange.asp

2-前に述べたように、(ngModelChange)入力にバインドされたモデル変数にバインドされます。

だから、私の解釈は：

(change)ユーザーが入力を変更するとトリガーされます
(ngModelChange) ユーザーのアクションに連続しているかどうかに関係なく、モデルが変更されたときにトリガーされます

— ジュリアン
ソース