我的组件中有一个像这样的数组，其中包含名称和图像路径。
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>
我可以做什么来解决这个问题？
最佳答案
这是因为您的图像网址中有空格，因此您需要在网址两边使用引号。
<li *ngFor="let skill of skills" [ngStyle]="{'list-style-image': 'url(\'' + skill.iconSrc + '\')'}">{{skill.name}}</li>
关于css - Angular NgStyle : list image style，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/67288781/