如何在 Angular 中使用 ng-container 和 ngFor 呈现的项目之间添加常规（中断）space 以允许自动换行

Question

当使用 ngFor 在 ng 容器中呈现 html 锚标记时，标记之间的 spaces 被删除。结果是内容溢出了父容器。

我尝试在跨度内添加 space 并使用了但这些会在渲染时被移除。

<ng-container *ngFor="let tag of tags">
    <a [innerHTML]="tag"></a>
    <span>&#32;</span>
</ng-container>

我发现的唯一方法是添加一个 space 和另一个字符（例如 | 管道）并将其设置为透明以便不可见。

<span class="wrap-hack"> |</span>

CSS

.wrap-hack {
    color: transparent;
}

尽管这行得通，但中断 space 允许自动换行，这有点麻烦。有没有“正确”的方法？

没有破解的结果

破解结果

Answer 1

问题是默认情况下，Angular 正在删除空格。为防止这种情况，请添加 preserveWhitespaces 组件装饰器。

此 Stackblitz 展示了 preserveWhitespaces 不需要的 hack。

How can a regular (breaking) space be added between items rendered using ng-container and ngFor in Angular to allow word wrapping