Связывание текста между вводом и диапазоном в Angular 6+

Question

Как связать входные тексты с охватом innerHTML в Angular6?

ts файл

...
finance_fullname: string;
...

файл шаблона

<input type="text" id="finance_fullname" [(ngModel)]="finance_fullname">
<span class="fullname" ngBind="finance_fullname"></span>

Answer 1

Я не знаю, почему вы читаете из angularjs, так как вы работаете с angular 6. Если вы хотите двойное связывание, просто сделайте это так.

<input type="text" id="finance_fullname" [(ngModel)]="finance_fullname">
<span class="fullname">{{finance_fullname}}</span>

Answer 2

Я могу сказать, что самым безопасным способом было бы innerText или textContent.

<span class="fullname" [textContent]="finance_fullname"></span>
<span class="fullname" [innerText]="finance_fullname"></span>

Даже AngularJS использовал textContent для односторонней привязки.Это только extract значение модели и дамп непосредственно внутри указанного html-узла.Даже если вы передадите html, он добавит этот html как текст (декодированный html) на страницу.

Демо

innerHTML также будет работать для вас, но это может быть опасно, так как это даст возможность внедрить вредоносный контент на страницу в видеHTML.

Answer 3

Вы можете сделать это двумя способами

(i) Вы можете использовать [innerHTML]

<input type="text" id="finance_fullname" [(ngModel)]="finance_fullname">
<span class="fullname" [innerHTML]="finance_fullname"></span>

STACKBLITZ DEMO

(ii) Просто свяжите, используя двустороннюю привязку данных

STACKBLITZ DEMO

<input type="text" id="finance_fullname" [(ngModel)]="finance_fullname">
<span class="fullname">{{finance_fullname}}</span>