在我的组件中,我有一个模板文字字符串,其中包含带有camelCase属性的HTML标记:
htmlString = `<mat-icon svgIcon="edit" ...></mat-icon>`;
此字符串被组装为forEach循环数组中对象的属性。
由于模板中的几个原因,我需要在* ngFor循环内的innerHtml属性中输出此结果:
<li *ngFor="let foo of foos" [innerHTML]="foo.htmlString"></li>
(这是我的实现的简化代码示例。)
[我发现在输出中,svgIcon
属性以小写形式svgicon
呈现,请参阅DOM inspector输出:
<li _ngcontent-qui-c96="">
<mat-icon svgicon="edit"></mat-icon>
</li>
错误或功能?找不到有关此行为的任何信息。感谢您提供任何提示!
属性的确通过Angular都转换为小写,不用担心。
此外,您提出的副作用是有趣的,可能需要一些解释:您将innerHtml
与Angular组件一起使用(mat-icon
,它不是标准的HTML标记)。
因此,无论如何,它将失败:Web浏览器不知道如何呈现mat-icon
。
要渲染mat-icon
,它必须通过Angular模板引擎:Angular将看到mat-icon
,并将提取组件定义/模板,并以HTML术语(DOM)进行渲染,浏览器可以了解。
通常情况下,您应该使用:
<li *ngFor="let foo of foos">
<mat-icon [svgIcon]="foo.icon" ...></mat-icon>
</li>
并且如果您的组件更复杂,则可以通过ng-content
使用内容投影进行探索。