Блог

Главная - Вопросы по программированию - Angular2 ngModelChange предыдущее значение

Angular2 ngModelChange предыдущее значение

#angular #angular2-ngmodel

#angular #angular2-ngmodel

Вопрос:

Есть ли способ получить предыдущее (последнее) значение поля в ngModelChange? То, что у меня есть, выглядит примерно так

HTML

 <input type="text" [(ngModel)]="text" (ngModelChange)="textChanged($event)">

Обработчик

 private textChanged(event) {
    console.log('changed', this.text, event);
}

Что я получаю, так это

 changed *newvalue* *newvalue*

Конечно, я могу сохранить старое значение, используя другую переменную, но есть ли способ получше?

Ответ №1:

Что вы можете сделать, так это,

ДЕМОНСТРАЦИЯ :http://plnkr.co/edit/RXJ4D0YJrgebzYcEiaSR?p=preview

 <input type="text" 
       [ngModel]="text"                      //<<<###changed [(ngModel)]="text" to [ngModel]="text"
       (ngModelChange)="textChanged($event)"> 

private textChanged(event) {        
    console.log('changed', this.text, event);
    this.text=event;                          //<<<###added 
}

Комментарии:

1. спасибо, я отметил ваш ответ полезным, но, похоже, он пока не будет отображаться.

2. Там стоит одна галочка. Вам просто нужно щелкнуть по нему, и оно отобразится зеленым цветом.

3. @Irtaza нажмите на «серый флажок» в левой части этого ответа (ниже пунктов)

4. не нарушает ли это двустороннюю привязку данных?

Ответ №2:

Итак, найдено довольно странное (по крайней мере, для меня) возможное решение для этого с наименьшими изменениями в рассматриваемом коде. Итак, при назначении (ngModelChange) атрибута перед [(ngModel)] я получаю следующее с тем же обработчиком:

 changed *older value* *new value*

Я получаю новое значение в this.text вот так:

 setTimeout(() => console.log(this.text), 0);

Комментарии:

1. Это небольшое предостережение стоило мне времени, я не знал, что порядок ngModel и ngModelChange имеет значение.

2. О, это неловко! Почему порядок должен иметь значение?

3. одна из глупостей Angular заключается в том, что кажется, что эти маленькие нюансы встречаются чаще, чем нет. Какая глупая функция, но спасибо, что нашли это!

4. Вау… Потрясающая находка! Это наряду с ответом Micronyks в совокупности было бы ответом.

5. Вау! Это странно

Ответ №3:

все, что вам нужно сделать, это поместить (ngModelChange)=»TextChanged($event)» слева от элемента [(ngModel)] в html-теге, например:

 <input (whatever...) (ngModelChange)="textChanged($event)" [(ngModel)]="text">

Таким образом, внутри TextChanged (событие) элемент, к которому вы привязываетесь, по-прежнему имеет предыдущее значение, в то время как event является новым

Если вы введете

 <input (whatever...) [(ngModel)]="text" (ngModelChange)="textChanged($event)">

Событие будет вызвано только с новым значением. Однако:

 <input (whatever...) (ngModelChange)="textChanged($event)" [(ngModel)]="text" (ngModelChange)="textChanged($event)">   -

Получит оба события с предыдущим и текущим значением

Комментарии:

1. Это правильный ответ. Я не знал, что порядок (ngModelChange) и [(ngModel)] внутри элемента важен. Спасибо

2. Да, это правильное решение для ошибки Angular!! В документе Angular Doco в разделе ngModel написано: «Источник события для создания события ngModelChange после обновления модели представления». ОБРАТИТЕ внимание на «после обновления модели представления», чтобы это было ошибкой Angular, потому что она НЕ детерминирована!!

3. Если вам нужны как включенные, так и новые значения, то не используйте (ngModelChange)=»eventHandlerMethod($event)», используйте (change)=»eventHandlerMethod($event)»

Ответ №4:

 <input (ngModelChange)="preTextChanged($event)" [(ngModel)]="text" (ngModelChange)="postTestChanged($event)">

Таким образом, вы можете узнать предыдущее значение и следующее значение

Комментарии:

1. Это поведение было для меня таким странным. Почему позиция атрибута для тега должна иметь какое-либо значение? Им следует присвоить отдельные имена. Спасибо, что прояснили это для меня.

Ответ №5:

Вы можете использовать методы получения и установки для сохранения старых значений. Например.

HTML

 <input type="text" [(ngModel)]="text" (ngModelChange)="textChanged($event)">

Машинописный текст:

 private _text: string = "";
private _oldText: string = "";
get text(): string{
    return this._text;
}
set text(value: string) {
    this._oldText = this._text;
    this._text = value;
}

Источник:https://www.typescripttutorial.net/typescript-tutorial/typescript-getters-setters /

Ответ №6:

У меня это сработало.

 <input
   [(ngModel)]="actionInputValue"
   (keydown)="prevValue = actionInputValue"
   (keyup)="doSomething()"
/>

Теперь в ts файле компонента вы можете выполнить консоль и проверить значения.

 doSomething() {
  console.log(this.prevValue, this.actionInputValue);
}

Идея в том, что keydown событие происходит до того, как ngModel будет обновлено.