Add html elements and json list inside angular typescript class

Question

我有这个代码。

  this._notificationService.showInfoMessage
        (
          'The list below cannot be reached'
            + `'<ul>
             <li> ${this.tagList
            .map(i => i.tag)
            .join(',')} </li>
            </ul>'`
        );

这没用

我想为此标签列表添加 html 列表，并将列表项一一显示为带有项目符号的列表。 我尝试了很多方法。

我使用浏览器检查视图制作它，我想得到如下一个

请为此建议最好的方法

Answer 1

为什么它不起作用？ 只需查看官方 Angular 文档的内容即可。

Angular 将该值识别为不安全并自动对其进行清理，从而删除脚本元素但保留元素等安全内容。

https://angular.io/guide/security#sanitization-example

这就是它的工作原理！

但是，您仍然有很多选择来实现您的目标。

由于您有一个标签列表/数组，您可以在模板中迭代它们并使用字符串插值。

 <ul>
  <li *ngFor="let tag of tags">{{tag}}</li>
 </ul>

文字插值： https://angular.io/guide/interpolation

PS 请与我们分享您的服务/组件的外观。