html - 使用 Angular 中的 ngFor 创建的具有不同样式的样式卡

Question

所以我想做的是将不同的样式应用于在 Angular 中使用 ngFor 创建的卡片。

现在它看起来像这样:

我的目标是为每张卡片设置不同的样式。由于它是使用 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;
}

这是一个简化的 example在行动中。

希望对您有所帮助!