javascript - 用<br/＆gt转换的 Angular 页面中的换行符

我有以下功能：

  setLocalVariableOnAccepted(ogp, hb, responseJson) {
    if (responseJson.ofgp === undefined) {
      this.ogpStatus = 'orange';
      this.ogpStatusMsg = responseJson.ofgp + ', <br/> No change. Previous value is used';
    }

在以下div中填充消息：

 <div id="default_ogp">
        <p>
        <b>Default Offline Grace Period [minutes]</b><br>
                  <input type="text" class="form-control" maxlength=7 id="default_ogp_input" size="60%"
                  pattern="^[1-9][0-9]*$" (focus)="onFocus($event)" (input)="onChangeInput($event)"
                  [(ngModel)]="ogpInteger" name="default_ogp_input" #default_ogp_input="ngModel">
            </p>
            <p id="invalid_pattern_match_ogp" class="inputValidationFailure" [hidden]="!default_ogp_input.hasError('pattern')">Invalid format</p>
            <p id="message_response_ogp" class="messageResponseBox" [style.background-color]="ogpStatus" [hidden]="!ogpStatusMsg">{{ogpStatusMsg}}</p>
    </div>

但一旦填充，标签将显示为：

Message..., <br/> No change. Previous value is used

所以打印为字符串，转换为文本，实际上是通过检查代码，我可以看到它被映射为以下ascii代码：＆lt; br />

Message, &lt;br/&gt; No change. Previous value is used</p>

如何更改它并引入换行符？

最佳答案

您将必须创建一个管道来清理HTML。

这是一个super simplified example.

基本上，您将在HTML中更改此行

<p id="message_response_ogp" class="messageResponseBox"
[style.background-color]="ogpStatus" [hidden]="!ogpStatusMsg">{{ogpStatusMsg}}</p>

像这样包括管道

<p id="message_response_ogp" class="messageResponseBox"
[style.background-color]="ogpStatus" [hidden]="!ogpStatusMsg"
[innerHTML]="ogpStatusMsg | sanitizeHtml"></p>

关于javascript - 用<br/＆gt转换的 Angular 页面中的换行符，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/59180042/