Angular material 使用Angular2及更高版本清理角度材质html标记

我试图通过属性绑定（方括号语法）输出以下html标记

检查
列表标题1
列表项1的内容
检查
清单标题2
列表项2的内容
检查
清单标题3
列表项3的内容

有关上面的标记，请参见：）

在html模板中输出：

即使我通过bypassSecurityTrustHtml（）方法处理html，列表也不会按应有的方式显示( )

让我困惑的是html输出，它似乎是正确的，但列表显示不正确

看看我为这个问题创建的以下stackblitz:

知道我做错了什么吗

----更新1---

通过获取html（或者在我的例子中是angular material markup），我们在想要显示的内容方面非常灵活。我们可以在一种情况下显示角度材质列表，在另一种情况下显示一些其他材质组件。这就是为什么我们从这个原型应用程序的API中获取html

关于

绿色列表（绿色矩形编号1）是硬编码的，在浏览器中显示正确

红色的由API提供。它通过bypassSecurityTrustHtml（）进行清理，html输出看起来正确（请参见红色矩形2b），但看起来不正确（请参见红色矩形2c）

那么为什么html呈现正确但看起来不正确？我找到了解决方案

您必须检查您的第一个案例（未消毒），并将相同的类放入其中

因此，您的新mat列表不能是无类别的，您必须在每个内部元素中这样做，例如：

<mat-list class="mat-list" role="list"> // and so on with other elements

//等等，还有其他元素

对于这段HTML标记，为什么不将其放在一个单独的组件中，然后使用元素选择器调用它呢？此内容应该是动态的，由数据库通过REST API提供。所以我认为一个单独的组件没有帮助，对吗？实际上，我认为问题在于角度材质的材质标记。看起来bypassSecurityTrustHtml（）函数正确处理了标记。然而，它不是由浏览器正确呈现的。您是否找到了解决方案？我也有同样的场景。不幸的是，我没有，因此不得不使用没有材质组件的纯html。似乎以这种方式使用材料组件是非常罕见的情况。

<mat-list class="mat-list" role="list"> // and so on with other elements