时间戳

首页 > 解决方案 > 为什么我的
标签显示在我的浏览器显示角度项目

html - 为什么我的
标签显示在我的浏览器显示角度项目

问题描述

我有从文本区域保存的文本。我将它保存到数据库中。我现在想在提交后将此文本显示到另一个页面上。我想保持与原始文本输入相同的格式。

这是重定向到其他页面后在浏览器上显示的内容。我将 br 替换为 --- 否则它将在此文本中创建实际中断。--- 等于 br

"M <---><---/> O <---/><---/>C<---/>集线器<---/>"

如何在没有 br 标签的页面上显示？我在其他情况下看到过这项工作，但不确定我做错了什么。

我已经能够使用 .replace 方法将 enter 替换为
. 唯一的事情是，
标签显示在显示屏上。

x.component.ts

  getMessages() {
    this._messageBoardService.getMessages().subscribe(
      (data: any) => {
        this.msgList = data
        this.msgList[0].message = this.msgList[0].message.replace(/\n/g, "<br />")
      })

  }

x.component.html

<h3>{{ msgList[0].title }}</h3>
<p> {{ msgList[0].message }}</p>

没有断点的预期输出是

米

○

C 集线器

标签： htmlangularfrontendline-breaksdisplay

解决方案

如果只是出于显示目的，请添加一个显示换行符的 css 属性

<p class="message">{{ msgList[0].message }}</p>

.message { white-space: pre-line; }

在这种情况下，您的 api 获取没有操作

getMessages() {
    this._messageBoardService.getMessages().subscribe(
      (data: any) => {
        this.msgList = data
      })
  }

或者

否则你可以用 Angular 做的是使用 innerHTML 属性

<p [innerHTML]="msgList[0].message"></p>

推荐阅读