Стиль карты с различными стилями, которые были созданы с помощью ngFor в Angular

Question

Итак, я пытаюсь применить разные стили к карточкам, которые были созданы с помощью ngFor в Angular.

Пока это выглядит так:

Моя цель - установить разные стили для каждой карты. Поскольку он был создан с помощью цикла ngFor, я мог изменить стиль только для всех из них.

Тогда мне удалось назначить класс для каждого элемента карты:

<div *ngFor="let module of modules" class="{{module.name}}">

После этого я применил стиль в CSS:

div.Rekrutacja {
  background-color: rgb(1, 1, 1);
} 

который частично работал. Он выбрал первый элемент, но я не могу его изменить. Я установил цвет фона на черный и вот что я получил:

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

HTML:

    <div class="flex-container">
  <div *ngFor="let module of modules" class="{{module.name}}">
    <mat-card matRipple [matRippleColor]="white"  class="flex-items hvr-reveal" *ngxPermissionsOnly="module.permissionsRequired">
      <span routerLink={{module.routing}}>
        <mat-card-header>
          <mat-card-title>
            <h1>
              <p style="text-align: center;">
                {{module.name}}
              </p>
            </h1>
          </mat-card-title>
        </mat-card-header>
        <div class="mat-icon-card">
          <p style="text-align: center">
          <mat-icon>{{module.icon}}</mat-icon>
          </p>
        </div>
        <mat-divider></mat-divider>
        <mat-card-content>
          <h3>
            <p style="text-align: center">
              {{module.description}}
            </p>
          </h3>
        </mat-card-content>
      </span>
    </mat-card>
  </div>
</div>

CSS:

.mat-card {
  background-color: rgba(255, 255, 255, 0.7);
}

div.Rekrutacja {
  background-color: rgb(1, 1, 1);
}

TS:

modules: any = [
    {
      name: 'Rekrutacja',
      icon: 'group',
      description: 'Moduł obsługi działu rekrutacji. Zarządzanie kandydatami.',
      routing: '/recruitment',
      permissionsRequired: [CONSTS.permissionCodes.accessRecruitmentModule]
    },
    {
      name: 'Sprzedaż',
      icon: 'work',
      description: 'Moduł obsługi działu sprzedaży. Zarządzenie firmami, osobami kontaktowymi i leadami.',
      routing: '/sales',
      permissionsRequired: [CONSTS.permissionCodes.accessSalesModule]
    },
    {
      name: 'Ustawienia',
      icon: 'settings',
      description: 'Moduł panelu administracyjnego. Zarządzanie użytkownikami i ustawieniami aplikacji.',
      routing: '/admin-panel',
      permissionsRequired: [CONSTS.permissionCodes.accessAdminPanelModule]
    },
  ];

Answer 1

Вместо нацеливания на <div>, обертывающий <mat-card>, который приведет к тому, что цвет фона будет применен к <div>, нацельтесь на фактическое <mat-card> соответствующего <div>:

div.Rekrutacja .mat-card {
  background-color: rgb(1, 1, 1);
}

div.Sprzedaż .mat-card {
  background-color: blue;
}

div.Ustawienia .mat-card {
  background-color: yellow;
}

Вот упрощенный пример в действии.

Надеюсь, это поможет!