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

Question

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

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

我想要的：根据播放器 ID，我想对跨度进行不同的样式设置。因此，我希望 class“icon-xyz”为 icon-123，其中 123 等于 player.id。

为什么我想要这个： 我有一张包含每个玩家肖像的大图片，通过设置这个 class 我准确地“剪下”了必要的肖像。

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

Answer 1

欢迎使用 Whosebug，我认为您可以将 class 名称添加为播放器对象的属性，在每个播放器中设置所需的 class 名称。然后你可以使用这个

<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 上的随机托管图片）。

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

Using Angular, can i set the CSS class within '*ngFor' depending on the values of each object I iterate through?

angular

ngfor