Angular 2 задерживает обновление модели в компоненте

Я новичок в Angular 2 и недавно пробовал двустороннюю привязку. У меня есть следующий код:

template.html

<select [(ngModel)]="val" (change)="onChanged()">
   <option>1</option>
   <option>2</option>
   <option>1</option>
</select>

component.ts

..//other code definitions here
export class MyComponent{
  val: number = 1; //edited this

  onChanged(){
    console.log(this.val);
  }
}

Проблема заключается в том, что когда выбранное значение в раскрывающемся списке изменяется, значение, выводимое на консоль, по-прежнему остается предыдущим значением. Он обновляется только после того, как я снова выбираю другое значение, но напечатанное значение по-прежнему остается ранее выбранным значением. Так что это как задержка на один выбор.

Надеюсь, кто-нибудь может помочь.

Спасибо.


angular angular2-template angular2-components
person Jed    schedule 27.10.2016    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Значение val будет обновляться только в следующем цикле обнаружения изменений Angular2. Чтобы использовать последнее значение в методе onChanged, используйте значение $event следующим образом:

<select [(ngModel)]="val" (change)="onChanged($event)">

In MyComponent:

onChanged(newVal){
  console.log(newVal);
}
person Harry Ninh    schedule 27.10.2016
comment
Разве это не противоречит цели двусторонней привязки? Мне придется загромождать свои функции параметрами там, где у меня уже есть модель, привязанная к представлению. - person Jed; 28.10.2016
comment
ИМО это не так. Двусторонняя привязка данных по-прежнему зарезервирована (поскольку значение в родительском компоненте со временем обновляется). Здесь вам нужна еще одна проблема: как выполнить некоторые действия с этим конкретным событием. Смешивание двух разных забот в одну — самый простой способ получить головную боль. - person Harry Ninh; 28.10.2016

arrow_upward
2
arrow_downward

Когда вы используете двустороннюю привязку — [(ngModel)], всегда используйте (ngModelChange) вместо (change):

<select [(ngModel)]="val" (ngModelChange)="onChanged()">
   <option>1</option>
   <option>2</option>
   <option>1</option>
</select>

Вот рабочий плункер.

person Stefan Svrkota    schedule 27.10.2016
comment
Да, но дело в том, что функция onChanged() вызывается дважды, когда я использую ngModelChange. - person Jed; 28.10.2016
comment
Я отредактировал свой пост, я что-то пропустил в объявлении val. - person Jed; 28.10.2016
comment
@Jed Он по-прежнему вызывается один раз при каждом изменении, снова проверьте Plunker, который я предоставил. - person Stefan Svrkota; 28.10.2016
comment
Я не совсем уверен, что происходит с моим кодом, но код внутри моего onChange на самом деле извлекается с сервера, поэтому я просто создал логическую переменную, чтобы проверить, не вернулось ли обещание, таким образом, оно не выполняется дважды. Я не уверен, что это чистый обходной путь, но он работает. Спасибо за помощь. - person Jed; 29.10.2016