Javascript 输入和跨距之间的文本绑定

如何将输入文本绑定到Angular6中的跨innerHTML

ts文件

...
finance_fullname: string;
...

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

模板文件

...
finance_fullname: string;
...

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

---

有两种方法

（i） 您可以使用

[innerHTML]

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

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

（ii）仅使用双向数据绑定进行绑定

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

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

{{finance_fullname}

我不知道您为什么要阅读angularjs，因为您正在使用Angular6。 如果你想要双重装订，就这样做吧

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

{{finance_fullname}

我可以说最安全的方法是

innerText

或

textContent

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

甚至AngularJS也使用

textContent

进行单向绑定。它只提取模型值并直接转储到指定的html节点中。即使您传递

html

，它也会将该html作为文本（解码的html）添加到页面上

---

innerHTML

也适用于您，但这可能会很危险，因为它会给您机会以html的形式在页面上注入恶意内容。

[innerHTML]如我所料工作，但第二个不工作，原因是什么？检查上面的演示我检查了演示，似乎您没有在ts文件中声明变量，但我声明了，这就是原因？演示运行得很好，但对我来说不是。是的，那很重要，在这种情况下，您使用ngModelchange并重新分配值它是一个表单？因为如果你有很多输入，你只需要在你的ts表单中输入：any={}，然后在你的html[（ngModel）]=“form.finance\u fullname”中输入，它应该可以工作。我发现这一个不起作用，因为我在ts文件中声明了变量“finance\u fullname”，一旦我删除了所有声明的变量，它也可以正常工作。提前感谢。有关不同html节点元素文本属性的更深入解释：请注意，除非您特别打算插入html并采取预防措施以避免XSS攻击，否则不建议使用

innerHTML