Работая с Angular 2, одна из типичных проблем, с которой могут столкнуться начинающие разработчики — это осуществление двустороннего связывания данных с чекбоксом.
Допустим, у нас есть HTML-код с чекбоксом, который мы хотим связать с переменной в компоненте TypeScript.
<div class="checkbox">
<label>
<input #saveUsername [(ngModel)]="saveUsername.selected" type="checkbox">Save username
</label>
</div>
И есть компонент TypeScript с переменной saveUsername.
export class LoginComponent implements OnInit {
private saveUsername: boolean = true;
…
}
При клике на чекбокс в браузере, значение переменной saveUsername в компоненте TypeScript изменяется. Однако, если изменить значение переменной saveUsername в компоненте TypeScript, состояние чекбокса в браузере остается неизменным.
Это происходит из-за того, что в Angular 2 двустороннее связывание данных осуществляется с использованием директивы [(ngModel)]. Однако, в данном примере, она используется не совсем корректно.
Вместо использования [(ngModel)]="saveUsername.selected" необходимо использовать просто [(ngModel)]="saveUsername". В этом случае, при изменении значения saveUsername в компоненте TypeScript, состояние чекбокса в браузере также изменится.
Итак, правильный HTML-код будет выглядеть следующим образом:
<div class="checkbox">
<label>
<input [(ngModel)]="saveUsername" type="checkbox">Save username
</label>
</div>
Таким образом, для успешного двустороннего связывания данных с чекбоксом в Angular 2 необходимо правильно использовать директиву [(ngModel)].
Добавить комментарий