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代码：＆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，您应该使用innerHTML属性绑定

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

Example

Answer 3

您将必须创建一个管道来清理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>

用＆lt; br /＆gt;转换的角度页面中的换行符

3 个答案: