(изменить) против (ngModelChange) в угловых


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
Я не хочу сравнивать их. Я просто хочу знать, какой из них лучше для производительности?
Рамеш Раджендран

6
Да нет сравнения. Если вы используете ngModel, вы можете использовать позже, в противном случае первый. Всегда предпочтительнее избегать ngModel, так как это двухстороннее связывание данных, а значит, плохо для производительности
Vamshi

2
Отредактировано, чтобы подчеркнуть «в чем разница» и «что является более производительным», чтобы убрать субъективность, и проголосовало за повторное открытие.
ruffin

12
В Angular 7 (ngModelChange) = "eventHandler ()" сработает ДО изменения значения, связанного с [(ngModel)] = "value", в то время как (change) = "eventHandler ()" сработает ПОСЛЕ значения, связанного с [(ngModel)] = «значение» изменено.
CAK2

4
Кстати, событие (изменение) вызывается только тогда, когда фокус покидает вход. Если вы хотите, чтобы событие срабатывало после каждого нажатия клавиши, вы можете использовать (ввод) событие.
Джон Гилмер

Ответы:


496

(change) событие, связанное с классическим событием изменения ввода.

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

Вы можете использовать (изменить) событие, даже если у вас нет модели на входе, как

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

(ngModelChange)является @Outputдирективой ngModel. Он срабатывает, когда модель меняется. Вы не можете использовать это событие без директивы 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
Что произойдет, если я использую событие change с объектом ngmodel?
Рамеш Раджендран

6
@RameshRajendran Я улучшил ответ. Вы все еще можете использовать событие change с объектом ngModel, но событие change передает параметр события, событие ngModelChange передает новое значение.
omeralper

1
Да +1. Но у меня есть проблема с ngmodelchange, когда вы очищаете все значения из текстового поля, используя ctr + A., тогда ngModelChange не запускается.
Рамеш Раджендран

6
<input (ngModelChange)="modelChanged($event)">не правильно, [ngModel]обязательно.
e-cloud

3
Что-то, вы не можете сделать (change), в этом случае вы можете сделать(onClick)="yourFunction(youParameter)"
jpmottin

83

В Angular 7 (ngModelChange)="eventHandler()"сработает до того, [(ngModel)]="value"как (change)="eventHandler()"будет изменено значение, связанное с, в то время как сработает после того, как [(ngModel)]="value"будет изменено значение, связанное с .


1
Я просто протестировал в Angular 7.1, и значение из ngModel обновляется до вызова события. Так вот что я использую
Jahrenski

Это работало в угловых 6 также. +1 за спасение моего времени :)
Хемадри Дасари

1
Разве это не наоборот? По данным Angular Docs ngModelChange стреляет после обновления вида модели.
ярость

3
В последней документации angular этот случай описан: angular.io/guide/…
pioro90

4
В Angular 7.2 действительно (ngModelChange)событие вызывается до того, как значение изменилось и (change) после того, как оно изменилось. Спасибо за информацию, супер полезно!
Деннис

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события, которые должны быть выполнены в некотором порядке.

Подведение итогов: если вы разместите ngModelChangeранее ngModel, вы получите $eventкак новое значение, но ваш объект модели по-прежнему имеет предыдущее значение. Если вы разместите его после ngModel, модель уже будет иметь новое значение.

ИСТОЧНИК


Спасибо за указание на это! У меня была эта проблема, пока я не нашел твоего объяснения
омостан

2

1 - (change) привязан к событию onchange HTML. В документации по HTML onchange сказано следующее:

Выполнить JavaScript, когда пользователь изменяет выбранную опцию <select>элемента

Источник: https://www.w3schools.com/jsref/event_onchange.asp

2 - Как указано выше, (ngModelChange)привязан к переменной модели , связанной с вашим входом.

Итак, моя интерпретация такова:

  • (change)срабатывает, когда пользователь меняет ввод
  • (ngModelChange) срабатывает при изменении модели, независимо от того, является ли она следствием действия пользователя или нет
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.