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

Question

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

现在它看起来像这样：

我的目标是为每张卡片设置不同的样式。由于它是使用 ngFor 循环创建的，因此我只能更改所有样式的样式。

然后我设法为每个卡片元素分配一个类：

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

之后我在 CSS 中应用了样式：

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

这部分工作。它选择了第一个元素，但我无法真正修改它。我将背景颜色设置为黑色，我得到了：

所以它只适用于某个区域（我不知道它是什么区域），我无法进入实际的 mat-card 以将其与其他区域分开。

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

不要定位包裹<mat-card>的<div>，这会导致将背景颜色应用于<div>，而是定位各个<div>的实际<mat-card>：

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 实际操作。

希望对您有所帮助！