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>的{{1}}为目标，而不是将{{1}的背景颜色应用于<mat-card>的{{1}}为目标， }}：

<div>

这里是简化的example。

希望有帮助！

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

1 个答案: