Question

我有一个像{{foo}}这样的普通绑定，它在HTML中显示foo的值作为文本。来自服务器的文本是"R&D"。我需要将其显示为＆＃34; R＆amp; D＆＃34;。有什么帮助吗？

Answer 1

{{}}用于字符串绑定。

使用属性绑定到innerHTML代替正确显示这些字符。

<div [innerHTML]="foo">

有关详细信息，请参阅https://stackoverflow.com/a/41089093/217408。

Answer 2

为了更有趣和灵活，您可以创建一个解析HTML实体的管道：

@Pipe({name: "decodeHtmlString"})
export class DecodeHtmlString implements PipeTransform {
    transform(value: string) {
        const tempElement = document.createElement("div")
        tempElement.innerHTML = value
        return tempElement.innerText
    }
}

{{foo | decodeHtmlString}}

Answer 3

如果您不想使用[innerHTML]，则可以使用unicode字符串字符（如果您在项目中使用unicode字符串）。

对于＆＃39;＆amp;＆＃39;符号，那将是U + 0026：

<div>{{"R\u0026D"}}</div>

Answer 4

虽然innerHTML会起作用，但它会打破这一行，div将显示在新行中（如果您喜欢使用div）。请改用outerHTML。它会在您使用它的同一位置添加foo的值。

<div [outerHTML]="foo"> </div>

使用innerHTML，span是更好的选择。

Answer 5

您可以像这样使用innerHTML：

 <span [innerHTML]= "foo"></span>

它会正确解码

Answer 6

根据公认的答案，我制作了一个样本

我分享了对谁的关心。

TS file
    export class AppComponent  {
      cubicSymbol = 'm&sup2;';
    }
HTML file
    <h2>Symbol: <span [innerHTML]="cubicSymbol"></span></h2>

https://stackblitz.com/edit/angular-display-symbols

Answer 7

您也可以像这样{{“ \ u0026”}}

Answer 8

除了使用 [innerHTML]，您还可以用 HexCode 替换重音字符（来自：Accented Characters and Ligatures in HTML and JavaScript）

例如“R&D”将被保存为“R\x26D”

这样你就可以使用普通绑定了。

Answer 9

你可以试试这个。

<div [innerHTML]="R&amp;D"></div>

将您的模型绑定为

<div [innerHTML]="foo"></div>

在Angular 2绑定中显示HTML特殊字符？

9 个答案: