Проблема не (прямо) угловая.Проблема в том, что вы читаете innerHtml, который предоставит вам только ту информацию, которую может дать innerHtml - это значения атрибутов , определенных в тегах.
Пустьмне объяснить.Предположим, у вас есть следующий html (на данный момент забудьте об angular):
<input type="text" value="42" >
Это входной файл, введите «текст».К нему мы применили атрибут.
value="42"
Теперь вы предполагали, что изменение значения поля ввода изменит значение атрибута - возможно, вы, хотя они были одинаковыми.Это распространенная ошибка: на самом деле свойство (значение) объекта (узла элемента) - это одно, а атрибут (значения) - другое.Они явно связаны, но не одинаковы.
Может быть, пример может прояснить это:
element.value = "42"
Это установит "значение" свойство элементадо "42".На значение атрибута это не влияет.Следующее вместо этого установит значение атрибута равным "42"
element.setAttribute("value", "42")
Теперь большинство браузеров, вероятно, обнаружат изменение значения атрибута наDOM и измените значение свойство на фактическом элементе соответственно, но они все еще являются отдельными личностями.
Взяты из Угловые - атрибут HTML противСвойство DOM :
Например, когда браузер отображает <input type="text" value="Bob">, он создает соответствующий узел DOM со свойством значения, инициализированным как «Bob».
Когда пользователь вводит «Sally» в поле ввода, свойство значения элемента DOM становится «Sally».Но атрибут значения HTML остается неизменным, когда вы обнаружите, если спросите у элемента ввода об этом атрибуте: input.getAttribute('value') возвращает «Боб».
В качестве доказательства, пожалуйста, рассмотрите следующий пример - который не 'т даже использовать угловой:
function showInnerHtml() {
console.log(document.getElementById('questionField').innerHTML);
}
<div id="questionField">
<input id="questionField" type="text" value="420">
<button type="button" onClick="showInnerHtml()">Button</button>
</div>
Попробуйте изменить значение в поле ввода, затем нажмите кнопку.Вы увидите, что значение в атрибуте не отражает ваши изменения - только свойство.
Итак, то, что вы пытаетесь сделать, само по себе невозможно.
Тем не менее, еслиВы действительно должны, есть возможный (необоснованный для работы в любом браузере) обходной путь.Angular может использовать специальный синтаксис [attr.name] для привязки к значению атрибута.Это означает, что вы действительно можете создать привязку к свойству значения атрибута HTML.
Пожалуйста, обратитесь к этому стеку для быстрого POC этого , и не стесняйтесь спрашивать дополнительные разъяснения, еслинеобходимо.