Как определить одно и то же свойство css для нескольких классов, генерируемых динамически с помощью ngFor (Angular)?

Question

Я пытаюсь написать css для динамических классов, для этого я сгенерировал классы, используя ngFor, как показано ниже

<div style="max-height: 450px;" *ngFor="let item of data;let i = index" class="card{{i + 1 }}">
.....
</div>

Теперь я пишу css для вышеупомянутых динамических классов, как это ->

@media (min-width: 1399px) {
  .card2,
  .card6 {
   padding-left: 0px;
   padding-right: 0px;
  }
  .card3,
  .card7 {
   padding-right: 0px;
  }
}
@media (min-width: 576px) and (max-width: 768px) {
  .card2,
  .card4,
  .card6 {
   padding-left: 0px;
 }
}

Теперь у меня меньше 8 делений, но может быть больше 20, и тогда у меня будут проблемы.

Итак, есть ли какой-нибудь кратчайший способ для определения вышеупомянутых правил CSS, таких как card (n + 1) {....}?

Answer 1

Если вы используете sass или менее, вы можете использовать управляющие директивы, ваш код sass будет выглядеть так:

@for $i from 0 through 20 {
  .card-#{$i} { padding-left: 0px; }
} 

Вот пример работы.

Answer 2

Легко, peasy.Просто измените тип значения вашего атрибута класса, чтобы он принимал javascript вместо строки, и добавьте конкатенацию.

<div
  style="max-height: 450px;"
  *ngFor="let item of data;let i = index"
  [class]="'card' + (i + 1)">
  .....
</div>

Answer 3

Если нет шаблона и, следовательно, вы не можете использовать sass, вы можете посмотреть директиву [ngStyle].Пример использования:

<div *ngFor="let item of data;let i = index" class="card-{{i + 1 }}" [ngStyle]="calcStyle(item, i)">
.....
</div>

и возврат ожидаемого стиля в ваш файл .ts, например:

calcStyle(item, i){
  if (i==6){
     return {
       'padding-left': '0px;',
       'padding-right': '0px;'
       }
    }
 }

Но я думаю, что вам следует избегать установки отступов по индексутекущий товарВместо этого попробуйте использовать какую-то сетку.

Answer 4

Если я правильно понял ваш вопрос, вы можете увидеть мою реализацию для динамической вставки классов здесь .

В основном вам нужно создать функцию, которая возвращает имя вашего класса.

Если вам нужно создать конкретные стили CSS для каждого элемента карты n + 1, то вы можете попробовать это:

card:nth-child(n+1){
  background-color: red;
}

Answer 5

Используйте ваши текущие классы в качестве идентификаторов и используйте общий класс для всех.

class="card" id="card-{{ i }}"