大佬教程收集整理的这篇文章主要介绍了Angular NgStyle : 列表图像样式，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
我有一个这样的数组，在我的组件中有一个名称和一个图像路径。
skills = [
{name: 'HTML5',iconSrc: 'src/assets/images/HTML-5 min.png'},{name: 'CSS3',iconSrc: 'src/assets/images/css-3 min.png'},{name: 'UML',iconSrc: 'src/assets/images/hIErarchical-structure min.png'},{name: 'JavaScript',iconSrc: 'src/assets/images/JavaScript min.png'},{name: 'PHP',iconSrc: 'src/assets/images/PHP min.png'},{name: '.NET',iconSrc : 'src/assets/images/hashtag min .png'}
];
我想创建一个循环，我可以在样式属性“List-style-image”中使用 iconSrc 中的路径 我试过这个，但它不起作用
<li *ngFor="let skill of skills" [ngStyle]="{'List-style-image': 'url({{skill.iconSrc}})'}">{{skill.name}}</li>
或者类似的东西
<li *ngFor="let skill of skills" style="List-style-image: url("{{skill.name}}")">{{skill.name}}</li>
我该怎么做才能解决这个问题？
你就快到了！您需要在样式中使用动态值，因此有必要使用 [ngStyle]。没有括号的样式将不允许任何动态值。 {{ 花括号语法 }} 仅用于属性值之外。
这应该有效：
<li *ngFor="let skill of skills" [ngStyle]="{'list-style-image': 'url(\"' + skill.iconSrc + '\")'}">{{skill.name}}</li>
这是因为您的图片网址中有空格，因此您需要在网址周围使用引号。
<li *ngFor="let skill of skills" [ngStyle]="{'list-style-image': 'url(\'' + skill.iconSrc + '\')'}">{{skill.name}}</li>
[style.listStyleImage]="'url(' + skill.iconSrc + ')'"
这只是实现其他人发布的内容的不同方式，但我认为这是一种非常干净的方法。确保您的 iconSrc 是正确的...我怀疑您使用的路径是否有效，可能需要为 /assets/image.png
以上是大佬教程为你收集整理的Angular NgStyle : 列表图像样式全部内容，希望文章能够帮你解决Angular NgStyle : 列表图像样式所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。