使用 Angular，我可以根据我迭代的每个对象的值在 '*ngFor' 中设置 CSS 类吗？

Question

所以我正在尝试使用 Angular 和 Firebase 构建一个小型 Web 应用程序，其中所述应用程序应显示玩家列表。我这样渲染的玩家列表：

<ul class="team">
    <li *ngFor="let player of players">
      <span class="icon icon-*xyz*"></span> {{ player.name }}
    </li>
</ul>

我想要什么：根据玩家 ID，我想以不同的方式设置跨度的样式。因此，我希望“icon-xyz”类为 icon-123，其中 123 等于 player.id。

为什么我想要这个：我有一张包含每个玩家肖像的大图，通过设置这个类，我完全“剪掉”了必要的肖像。

我尝试了什么/问题：我浏览了 Angular 文档和 Google 以寻找 Angular 的功能，这将帮助我 - 但没有成功。我发现 React 提供了一种功能，其中组件具有“probs”功能，可以访问对象属性以更改样式。我还没有为 Angular 找到类似的东西，现在我的问题是是否有一些好的解决方案可以解决我的问题，或者我是否应该完全改变我的方法。

Answer 1

欢迎使用 Stackoverflow，我认为您可以将类名添加为播放器对象的属性，在每个播放器中设置所需的类名。那你就可以用这个了

<span class="icon {{player.icon}}"></span> {{ player.name }}

这是一个如何工作的示例https://stackblitz.com/edit/angular-ivy-buv8dr

Answer 2

假设您有一个对象作为基础属性，您有多种选择。

Stack

例子：

<div *ngFor="let user of users">
  <span ngClass="{{user.role}}">
    <img src="{{user.icon}}" height="50px" />
    <div >{{user.name}}</div>
  </span>   
</div>

您可以使用 ngClass 添加/删除类。任何属性或表达式都可以根据需要在这里工作。

您还可以使用属性绑定来根据数据要求附加 DOM。对于这个例子：我们有一个名字、一个角色（下划线的颜色）和一张图片（Google 上随机托管的图片）。