Угловой 2 + динамический стиль * 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;
}

Другим способом было бы использование функции определения цвета для каждой роли в вашем файле 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. Возвращаемым значением из функции будет имя вашего класса.Ваш HTML будет выглядеть так:

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

И ваш CSS, если вы используете точно такую ​​же функцию в вашем файле TS, как в варианте 2:

.yellow {
  background-color: yellow;
}

.red {
  background-color: red;
}

.blue {
  background-color: blue;
}

Конечно, эти имена классов могут быть изменены на что угодно.Надеюсь, это поможет.

Answer 2

Таким образом, я получил ответ без необходимости использовать функцию, чтобы получить ваш стиль в HTML, но при этом не иметь предопределенных ролей.

Вы можете добавить свойство color для ваших участников, которое будет основано на роли участника.Предполагая, что вы знаете элементы и цвета до создания компонента, вы можете установить это в 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>