Angular *ngFor渲染用户标签时出现多余</p>标签问题求助

嘿，我来帮你拆解下你遇到的这两个问题：多余的</p>闭合标签，还有标签格式不符合预期的问题。

为什么会出现多余的</p>？ #

你原来的代码里把*ngFor放在了<p>标签上，这意味着每遍历一个tag，就会生成一个独立的<p>元素。比如当tagsArr有3个元素时，DOM结构会变成这样：

<div style="display: flex;">
  <p> <span>Tags: </span> </p>
  <p> <span> #name, </span> </p>
  <p> <span> #name, </span> </p>
  <p> <span> #name, </span> </p>
</div>

你看到的“多余</p>”其实是每个循环生成的<p>的闭合标签，只是因为flex布局让这些<p>横向排列，视觉上看起来像是连在一起，但DOM结构里每个标签都被包裹在单独的<p>中，导致解析时出现了多个闭合标签的显示。

如何实现预期的Tags: #name, #name, #name效果？ #

我们需要调整DOM结构，去掉不必要的<p>嵌套，同时控制逗号的显示（避免最后一个标签后面也有逗号）。这里有个简洁的修改方案：

<div *ngIf="tagsArr" style="display: flex; align-items: center;">
  <span>Tags: </span>
  <!-- 用ng-container循环，不会生成额外DOM元素 -->
  <ng-container *ngFor="let tag of tagsArr; let last = last">
    <span>{{tag}}{{last ? '' : ', '}}</span>
  </ng-container>
</div>

方案说明： #

1. 去掉多余的<p>：把循环从<p>移到ng-container上，它是Angular的“虚拟容器”，不会在最终DOM里生成额外元素，避免了多个<p>带来的结构问题。
2. 控制逗号与空格：通过let last = last获取循环的最后一项标识，最后一个标签后面不再添加, ，完美匹配你想要的格式。
3. 对齐优化：给父div加上align-items: center，确保“Tags:”和标签内容垂直对齐，视觉更美观。

这样修改后，渲染出来的内容就会是你期望的Tags: #name, #name, #name，同时DOM结构也更干净，不会出现多余的闭合标签啦！

内容的提问来源于stack exchange，提问作者Paopao