如何为 *ngFor 中的对象动态添加样式

Question

我有一个成员列表，每个成员都有一个角色，我想根据角色为其名称着色。在我的 HTML 中，我使用 *ngFor 运行以创建每个 div，但我没有设法为 div 着色。

Answer 1

1. 最简单的方法是使用成员的角色作为你的 css 类。你的 html 就是这样：

   <div *ngFor="let member of members" class="{{member.role}}">
     {{member.name}}
   </div>
   

例如，如果您有这样的成员列表：

members = [
 {name: 'jan', role: 'admin'},
 {name: 'kees', role: 'user'},
 {name: 'piet', role: 'admin'},
 {name: 'joop', role: 'user'},
 {name: 'klaas', role: 'superman'},
];

你的 CSS 应该是这样的：

.admin {
    background-color: yellow;
}

.user {
    background-color: red;
}

.superman {
    background-color: blue;
}

1. 另一种方法是使用函数来确定 ts 文件中每个角色的颜色：

   getColorClass(role: string) {
     let returnValue;
     switch (role) {
     case 'admin':
       returnValue = 'red';
       break;
     case 'user':
       returnValue = 'yellow';
       break;
     case 'superman':
       returnValue = 'blue';
       break;
     default:
       returnValue = 'white';
   }
   return returnValue;
   

   }

并像这样在你的 html 中使用这个函数：

<div *ngFor="let member of members" [style.background-color]="getColorClass(member.role)">
  {{member.name}}
</div>

1. 第三种方法是将 ngClass 与选项 2 中的函数结合使用。该函数的返回值将是您的类的名称。你的 html 看起来像这样：

   <div *ngFor="let member of members [ngClass]="getColorClass(member.role)">
   {{member.name}}
   </div>
   

   如果您在 ts 文件中使用与选项 2 中完全相同的功能，那么您的 css：

   .yellow {
     background-color: yellow;
   }
   
   .red {
     background-color: red;
   }
   
   .blue {
     background-color: blue;
   }
   

当然，这些类名可以更改为您想要的任何名称。 希望这会有所帮助。

Answer 2

所以我想了一个答案，而不必使用函数来获取 HTML 中的样式，同时仍然没有预定义的角色。

您可以为您的成员添加一个颜色属性，这将基于成员的角色。假设您在制作组件之前知道成员和颜色，您可以在ngOnInit() 中设置它，如下所示：

ngOnInit() {
    this.assignColorsToMembers();
  }

  assignColorsToMembers() {
    const uniqueRoles = this.getUniqueRoles();
    const rolesWithColors = this.assignColorsToRoles(uniqueRoles);
    this.members.forEach(member => {
      member.color = rolesWithColors[member.role];
    });
  }

  getUniqueRoles(): string[] {
    const allRoles = this.members.map(member => member.role);
    const uniqueRoles = Array.from(new Set(allRoles));
    return uniqueRoles;
  }

  assignColorsToRoles(roles: string[]): RolesWithColors {
    const rolesWithColors = {};
    roles.forEach((role, index) => {
      rolesWithColors[role] = this.colors[index];
    });
    return rolesWithColors;
  }

接口：

interface RolesWithColors {
  [key: string]: string;
}

interface Member {
  name: string;
  role: string;
  color?: string;
}

在 getUniqueRoles() 中，您创建一个数组，获取所有成员的角色，然后删除重复项。在 assignColorsToRoles() 中，您创建一个对象，其中键（属性）是您在 getUniqueRoles() 中创建的数组中的角色，值是您的颜色数组中的颜色。

这假设您有一个颜色与此类似的数组：colors = ['red', 'yellow', 'blue', 'green', 'purple'];，并且您的颜色数组的长度足以为每个角色赋予不同的颜色。

如果你的颜色数组不够长，你可以在函数中检查：

assignColorsToRoles(roles: string[]): RolesWithColors {
  const rolesWithColors = {};
  roles.forEach((role, index) => {
    if (this.colors.length < index + 1) {
      rolesWithColors[role] = 'white';
    }
    rolesWithColors[role] = this.colors[index];
  });
  return rolesWithColors;
}

当然，您可以用白色代替您想要的任何其他颜色。

如果您已经将颜色与某些角色相结合，这将简单得多。您可以省略 assignColorsToMembers 的前两个步骤，并根据您的角色和颜色的保存方式（数组或对象）更改其余步骤。

现在所有成员都有一个颜色分配给他们，你可以在你的 html 中使用这个属性：

<div *ngFor="let member of members" [style.background-color]="member.color">
  {{member.name}}
</div>

Answer 3

试试这个：

<div *ngFor="let member of members">
 <div [ngClass]="{'red': member.role === 'name of the role', 'blue': member.role === 'name of the role'}">
  {{member.name}}
 </div>
</div>