使用 <br/&gt 转换的角度页面中的换行符

Question

我有以下功能：

  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

so
打印为字符串，转换为文本，实际上通过检查我可以看到使用以下 ascii 代码映射的代码： &lt ; br/ >

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

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

Answer 1

使用实际的换行符：

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

并设置您的容器以使用 CSS 显示它们：

.messageResponseBox{
    white-space: pre;
}

或者，使用 innerHtml 也应该可以：

<span [innerHtml]="ogpStatusMsg"></span>

Answer 2

您将不得不创建一个管道来清理您的 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>