: nth-of-type или аналогичный с ngFor

С помощью ngFor Ive сделал цикл, который показывает содержимое массива в прямоугольниках разного цвета (div). Всего в массиве 6 позиций (иногда меньше 6), и мне нужны эти шесть полей с разными цветами фона (градиент оранжевого цвета). Я пробовал с: nth-of-type (1), (2) ... но все они имеют один и тот же цвет, потому что все они в конечном итоге идентифицируются как .class-div: nth-of-type (1)

Есть ли более умный способ сделать что-то подобное в Angular 11?

Не пробовал. Но вместо этого я бы посмотрел на sass list.nth ... sass-lang.com/documentation/values/lists ... затем имел бы список цветов ... значение в диапазоне, скажем, от 0 до 5 для 6 цветов, используя математику мода.

— 30.03.2021 19:33

angular sass

30.03.2021 19:04

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest

В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...

Angular и React для вашего проекта веб-разработки?

Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...

Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf

Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.

Угловой продивер

Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.

Мое недавнее углубление в Angular

Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...

Освоение Observables и Subjects в Rxjs:

Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular

Ответы 1

Вы можете определенно настроить таргетинг на div с помощью: nth-of-type в вашем файле css.

.my-class:nth-of-type(1) {
   background: red;
}

ИЛИ ЖЕ

Вы можете добавить индекс цикла к классу, сделав его уникальным, а затем определить его в css.

*ngFor = "let item of items; let i=index;" ngClass = "item-{{i}}"

.item-2 {
   background: blue;
}

Stackblitz - https://stackblitz.com/edit/angular-i6unne?file=src/app/app.component.ts

30.03.2021 19:21

Другие вопросы по теме

Shopify SCSS с синтаксисом Liquid не может быть преобразован в CSS

Невозможно импортировать файл scss как модуль реакции

Изображение next.js прозрачное

Как условно импортировать таблицу стилей SCSS в Next.js?

Как связать псевдоселекторы в SASS

Каков наилучший метод хранения сгенерированного SASS CSS в вашем приложении и системе управления версиями?

Выровняйте элементы одинаково, используя CSS с разными родительскими элементами

Angular Material 18: как изменить цвет фона?

Мне нужно перенести проект Laravel из ПРОДАКЦИИ в разработку (localhost)

Как создать текст с эффектом градиента и тиснения в CSS

: nth-of-type или аналогичный с ngFor

Ответы 1

Другие вопросы по теме

Похожие вопросы