Угловая модель с 2 компонентами обновить изображение без изменений модели

У меня есть приложение Angular 2.4.0. Я работаю над формой, в которой есть поддержка Javascript, которая проверяет/форматирует пару полей. Когда форматирование полей завершается, представление не обновляется, если значение, возвращаемое форматированием, соответствует исходному значению, прикрепленному к модели. Есть ли способ заставить просмотр обновиться? Поскольку нет изменения модели, принудительное обновление компонента не оказало никакого эффекта. Я предполагаю, что мне нужно будет обновить представление отдельно с чем-то вроде jQuery, но я хотел проверить, было ли лучшее решение первым.Угловая модель с 2 компонентами обновить изображение без изменений модели

Компонент: экспорта компонентов класса { поле: строка

formatField(updatedField: string) { 
    this.field = updatedField.replace(new Regexp("[^\\d]", "g"), ""); // remove everything except numbers 
    } 
}

HTML:

<html> 
    <body> 
    <input type="text" [ngModel]="field" (ngModelChange)="formatField($event)"> 
    </body> 
</html>

В приведенном выше примере, если модель "1", то я введите "1;['];[" и formatField возвращает "1", на экране по-прежнему будет отображаться "1;['];[", когда я ожидаю, что вместо этого отобразится "1" (это возвращаемое значение вызова formatField).

Редактировать: исправлено ngModelUpdate до ngModelChange в примере (опечатка). Добавлена версия Angular 2 для описания.

источник

2017-02-16 Skeeterdrums

Какую версию углового 2 вы используете? Попытайтесь изменить 'ngModelUpdate' на' ngModelChange' – mickdev

Моя ошибка, я поместил ngModelUpdate в пример вместо ngModelChange. Я использую ngModelChange в Angular 2.4.0 для вызова этого формата, но представление все еще не обновляется, если значение модели не изменилось. – Skeeterdrums

ОК, я вижу. Вы можете попытаться связать свою функцию с событием keyup, например: '' – mickdev

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

constructor(private cd: ChangeDetectorRef) {} 

formatField(updatedField: string) { 
    this.field = updatedField; 
    this.cd.detectChanges(); 
    this.field = updatedField.replace(new RegExp("[^\\d]", "g"), ""); // remove everything except numbers 
}

источник

2017-02-16 22:04:40

Это билет, спасибо! – Skeeterdrums

@ Роман, ты спас мой день! – securecurve

Угловая модель с 2 компонентами обновить изображение без изменений модели

ответ

Смежные вопросы