Я хочу применить несколько классов, но здесь есть некоторая разница по сравнению с другими вопросами Stackoverflow.

Мне нужно динамически назначить класс icon, а также 'not-selected'

component.ts

list = [ { name: 'Name1', icon: 'icon_1' }, { name: 'Name2', icon: 'icon_2' } ]
<div *ngFor="let data of list" 
    [ngClass]="{ 'some_icon' : true , 'not-selected': selectedOperation?.name !== operation.name }"> 
    {{data.name}} 
</div>

Я вижу some_icon, но мне нужно также динамически назначать data.icon. что-то вроде:

<div *ngFor="let data of list" 
    [ngClass]="{ data.icon , 'not-selected': selectedVal?.name !== data.name }"> 
    {{data.name}} 
</div>

Но это неправильный синтаксис. Что мне не хватает?

0
Samuel 1 Июл 2021 в 15:39

4 ответа

Лучший ответ

При использовании [ngClass] у вас есть 3 варианта, один из которых дает объекту ключи будет именем класса, если значение вернет истину (правда). остальные - это обычная строка и список массивов, но вы не можете использовать их комбинацию. В вашем случае вы можете использовать комбинацию class и [ngClass] таким образом, вы также можете использовать имена статических классов в HTML.

class="{{iconName}} static-class-name" [ngClass]="{'redClass': useRedClass}"

Вы должны определить свои данные, аналогичные приведенным ниже.

export class AppComponent {
  title = "CodeSandbox";
  iconName = 'icon1';
  useRedClass = true;
}
1
Onur Topal 1 Июл 2021 в 13:24

Вы можете попробовать с вводом [class].

<div *ngFor="let data of list" [class]="data.icon"
    [ngClass]="{'not-selected': selectedVal?.name !== data.name }"> 
    {{data.name}} 
</div>
1
tmsbrndz 1 Июл 2021 в 13:08

Когда произойдет динамическое событие, которое приведет к изменению ваших значков, снова назначьте свой список

private myDynamicChangeHandler = () => {
    this.list = [ { name: 'Name1', icon: this.useIcon1 ? 'icon_1' : 'icon_2' }, { name: 'Name2', icon: this.useIcon1 ? 'icon_1' : 'icon_2' } ]`
};
0
Andreas Turku 1 Июл 2021 в 12:47

Мне удалось добавить классы динамических значков в «нормальную» строку свойств class с интерполяцией строк, а также с конвейерами. Может быть, это сработает и для вас. Не забудьте добавить пробелы между именами классов

<div *ngFor="let data of list" 
    [class]="{{data.icon}} + ' ' +'otherDivClass redIconColorClass'"> 
    {{data.name}} 
</div>
0
Bertramp 1 Июл 2021 в 13:07