Question

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

Answer 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;
}

另一种方法是使用函数来确定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>

方法是将ngClass与选项2中的函数结合使用。函数的returnvalue将是您的类的名称。你的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>

Angular 2 +动态风格* ngFor

3 个答案: