Angular中TS变量多段文本无法按段落显示问题求助

我在TypeScript文件中定义了一个包含三段狮子介绍文本的变量history，但在HTML里用<p>标签绑定后，文本没有按原有的三段格式显示，而是合并成了一段。相关代码和效果如下：

我的TS文件 #

history = "狮子（Panthera leo）是原产于非洲和印度的豹属大型猫科动物。它拥有肌肉发达、宽阔的胸部，短而圆的头部，圆形耳朵，尾巴末端有一簇毛发。狮子具有两性异形特征：成年雄狮比雌狮更大，并且拥有显眼的鬃毛。狮子是群居物种，形成称为狮群的群体。一个狮群由几只成年雄狮、相关的雌狮和幼狮组成。雌狮通常集体狩猎，主要捕食大型有蹄类动物。狮子是顶级关键捕食者；虽然有些狮子会在机会出现时食腐，且有过捕食人类的记录，但该物种通常不会主动寻找并捕食人类。

狮子栖息在草原、稀树草原和灌丛地带。它通常比其他野生猫科动物更昼行，但在受到迫害时，会适应夜间和黄昏活动。在新石器时代，狮子的分布范围遍及非洲、东南欧、高加索、西亚和印度北部，但现在仅在撒哈拉以南非洲有零散种群，印度西部还有一个种群。自1996年以来，它被IUCN红色名录列为易危物种，因为自20世纪90年代初以来，非洲国家的种群数量下降了约43%。指定保护区外的狮群数量难以维持。尽管数量下降的原因尚未完全明确，但栖息地丧失和与人类的冲突是最令人担忧的因素。

狮子是人类文化中最广泛认可的动物象征之一，被广泛描绘在雕塑、绘画、国旗以及当代电影和文学作品中。自罗马帝国时期起，狮子就被圈养在动物园里，自18世纪末以来，它一直是世界各地动物园寻求展出的关键物种。狮子的文化描绘在古埃及尤为突出，在狮子历史和当前分布范围内的几乎所有古代和中世纪文化中都有出现。"

我的HTML文件 #

<mat-card class="param-card">
    <!-- 历史介绍 -->
    <span class="history" *ngIf="data"><p>{{history}}</p></span>
</mat-card>

当前显示效果 #

狮子（Panthera leo）是原产于非洲和印度的豹属大型猫科动物。它拥有肌肉发达、宽阔的胸部，短而圆的头部，圆形耳朵，尾巴末端有一簇毛发。狮子具有两性异形特征：成年雄狮比雌狮更大，并且拥有显眼的鬃毛。狮子是群居物种，形成称为狮群的群体。一个狮群由几只成年雄狮、相关的雌狮和幼狮组成。雌狮通常集体狩猎，主要捕食大型有蹄类动物。狮子是顶级关键捕食者；虽然有些狮子会在机会出现时食腐，且有过捕食人类的记录，但该物种通常不会主动寻找并捕食人类。狮子栖息在草原、稀树草原和灌丛地带。它通常比其他野生猫科动物更昼行，但在受到迫害时，会适应夜间和黄昏活动。在新石器时代，狮子的分布范围遍及非洲、东南欧、高加索、西亚和印度北部，但现在仅在撒哈拉以南非洲有零散种群，印度西部还有一个种群。自1996年以来，它被IUCN红色名录列为易危物种，因为自20世纪90年代初以来，非洲国家的种群数量下降了约43%。指定保护区外的狮群数量难以维持。尽管数量下降的原因尚未完全明确，但栖息地丧失和与人类的冲突是最令人担忧的因素。狮子是人类文化中最广泛认可的动物象征之一，被广泛描绘在雕塑、绘画、国旗以及当代电影和文学作品中。自罗马帝国时期起，狮子就被圈养在动物园里，自18世纪末以来，它一直是世界各地动物园寻求展出的关键物种。狮子的文化描绘在古埃及尤为突出，在狮子历史和当前分布范围内的几乎所有古代和中世纪文化中都有出现。

期望显示效果 #

狮子（Panthera leo）是原产于非洲和印度的豹属大型猫科动物。它拥有肌肉发达、宽阔的胸部，短而圆的头部，圆形耳朵，尾巴末端有一簇毛发。狮子具有两性异形特征：成年雄狮比雌狮更大，并且拥有显眼的鬃毛。狮子是群居物种，形成称为狮群的群体。一个狮群由几只成年雄狮、相关的雌狮和幼狮组成。雌狮通常集体狩猎，主要捕食大型有蹄类动物。狮子是顶级关键捕食者；虽然有些狮子会在机会出现时食腐，且有过捕食人类的记录，但该物种通常不会主动寻找并捕食人类。

狮子栖息在草原、稀树草原和灌丛地带。它通常比其他野生猫科动物更昼行，但在受到迫害时，会适应夜间和黄昏活动。在新石器时代，狮子的分布范围遍及非洲、东南欧、高加索、西亚和印度北部，但现在仅在撒哈拉以南非洲有零散种群，印度西部还有一个种群。自1996年以来，它被IUCN红色名录列为易危物种，因为自20世纪90年代初以来，非洲国家的种群数量下降了约43%。指定保护区外的狮群数量难以维持。尽管数量下降的原因尚未完全明确，但栖息地丧失和与人类的冲突是最令人担忧的因素。

狮子是人类文化中最广泛认可的动物象征之一，被广泛描绘在雕塑、绘画、国旗以及当代电影和文学作品中。自罗马帝国时期起，狮子就被圈养在动物园里，自18世纪末以来，它一直是世界各地动物园寻求展出的关键物种。狮子的文化描绘在古埃及尤为突出，在狮子历史和当前分布范围内的几乎所有古代和中世纪文化中都有出现。

HTML会忽略文本中的普通换行符，要实现分段显示可以用以下几种方法：

方法1：分割文本为数组，循环渲染<p>标签 #

在TS中把history按两段换行符分割成数组，过滤掉空内容：

historyParagraphs = this.history.split('\n\n').filter(para => para.trim());

然后在HTML中循环渲染每个段落：

<mat-card class="param-card">
    <span class="history" *ngIf="data">
        <p *ngFor="let para of historyParagraphs">{{para}}</p>
    </span>
</mat-card>

方法2：转换换行符为<br>标签（保留换行结构） #

如果只需要换行效果而非独立<p>标签，可以把文本中的两段换行替换为<br><br>，再用innerHTML绑定：

formattedHistory = this.history.replace(/\n\n/g, '<br><br>');

HTML代码：

<mat-card class="param-card">
    <span class="history" *ngIf="data" [innerHTML]="formattedHistory"></span>
</mat-card>

注意：使用innerHTML时要确保文本安全，若内容来自用户输入，需先做安全过滤。

方法3：直接定义带HTML结构的文本 #

如果提前确定要渲染成多个<p>标签，可直接在TS中定义包含HTML结构的文本：

historyHtml = `
<p>狮子（Panthera leo）是原产于非洲和印度的豹属大型猫科动物。它拥有肌肉发达、宽阔的胸部，短而圆的头部，圆形耳朵，尾巴末端有一簇毛发。狮子具有两性异形特征：成年雄狮比雌狮更大，并且拥有显眼的鬃毛。狮子是群居物种，形成称为狮群的群体。一个狮群由几只成年雄狮、相关的雌狮和幼狮组成。雌狮通常集体狩猎，主要捕食大型有蹄类动物。狮子是顶级关键捕食者；虽然有些狮子会在机会出现时食腐，且有过捕食人类的记录，但该物种通常不会主动寻找并捕食人类。</p>
<p>狮子栖息在草原、稀树草原和灌丛地带。它通常比其他野生猫科动物更昼行，但在受到迫害时，会适应夜间和黄昏活动。在新石器时代，狮子的分布范围遍及非洲、东南欧、高加索、西亚和印度北部，但现在仅在撒哈拉以南非洲有零散种群，印度西部还有一个种群。自1996年以来，它被IUCN红色名录列为易危物种，因为自20世纪90年代初以来，非洲国家的种群数量下降了约43%。指定保护区外的狮群数量难以维持。尽管数量下降的原因尚未完全明确，但栖息地丧失和与人类的冲突是最令人担忧的因素。</p>
<p>狮子是人类文化中最广泛认可的动物象征之一，被广泛描绘在雕塑、绘画、国旗以及当代电影和文学作品中。自罗马帝国时期起，狮子就被圈养在动物园里，自18世纪末以来，它一直是世界各地动物园寻求展出的关键物种。狮子的文化描绘在古埃及尤为突出，在狮子历史和当前分布范围内的几乎所有古代和中世纪文化中都有出现。</p>
`;

HTML中用innerHTML绑定：

<mat-card class="param-card">
    <span class="history" *ngIf="data" [innerHTML]="historyHtml"></span>
</mat-card>

内容的提问来源于stack exchange，提问作者Vishnu .T.D