angular 页面中的换行符转换为 <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

所以
打印为字符串，转换为文本，实际上通过检查代码我可以看到它映射为以下 ascii 代码：< 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>

angular 页面中的换行符转换为 <br/&gt

newline in angular page converted with <br/&gt

html

javascript

newline

angular

angular 页面中的换行符转换为 <br/&gt

newline in angular page converted with &lt;br/&gt

html

javascript

newline

angular

newline in angular page converted with <br/&gt