Angular中ngFor遍历含<br>的字符串无法换行的解决方法

这个场景我碰到过好多次！Angular默认用{{}}插值的时候，会自动把所有HTML标签转义成纯文本，所以你的<br>才会原封不动显示出来，而不是变成换行。不用拆分字符串的话，咱们换个绑定方式就能搞定：

直接把插值表达式换成[innerHTML]属性绑定，修改后的HTML代码是这样的：

<div class="content" *ngFor="let item of graphService.contents" [innerHTML]="item"></div>

原理很简单：[innerHTML]会告诉Angular，把绑定的字符串当作HTML内容去解析渲染，而不是纯文本。这样浏览器就能识别<br>标签，自动转换成换行了。

⚠️ 小提醒：如果这些字符串是来自用户输入或者不可信的数据源，要注意XSS安全风险，这时候需要用Angular的DomSanitizer来处理一下内容；但如果是你自己可控的内容（比如后端接口返回的安全文本），直接用上面的方法就没问题啦。

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