Множественные условия в ngClass - Угловые 4

Ответ 1

Вы пытаетесь присвоить массив ngClass, но синтаксис для элементов массива неверен, поскольку вы разделяете их на || вместо ,.

Попробуй это:

<section [ngClass]="[menu1 ? 'class1' : '',  menu2 ? 'class1' : '', (something && (menu1 || menu2)) ? 'class2' : '']">

Это также должно работать:

<section [ngClass.class1]="menu1 || menu2" [ngClass.class2] = "(menu1 || menu2) && something">    

Ответ 2

вам нужна объектная нотация

<section [ngClass]="{'class1':condition1, 'class2': condition2, 'class3':condition3}" > 

ref: https://angular.io/api/common/NgClass

Ответ 3

Существует несколько способов написания такой же логики. Как упоминалось ранее, вы можете использовать объектную нотацию или просто выражение. Однако, я думаю, вы не должны так много логики в HTML. Трудно проверить и найти проблему. Вы можете использовать функцию getter для назначения класса.

Например;

public getCustomCss() {
    //Logic here;
    if(this.x == this.y){
        return 'class1'
    }
    if(this.x == this.z){
        return 'class2'
    }
}
<!-- HTML -->
<div [ngClass]="getCustomCss()"> Some prop</div>

//OR

get customCss() {
    //Logic here;
    if(this.x == this.y){
        return 'class1'
    }
    if(this.x == this.z){
        return 'class2'
    }
}
<!-- HTML -->
<div [ngClass]="customCss"> Some prop</div>

Ответ 4

<section [ngClass]="{'class1':expression1, 'class2': expression2, 
'class3':expression3}">

Не забудьте добавить одинарные кавычки вокруг имен классов.

Ответ 5

У меня была такая же проблема. Я хотел установить класс после просмотра нескольких выражений. ngClass может оценить метод внутри кода компонента и рассказать вам, что делать.

Итак, внутри * ngFor:

<div [ngClass]="{'shrink': shouldShrink(a.category1, a.category2), 'showAll': section == 'allwork' }">{{a.listing}}</div>

И внутри компонента:

section = 'allwork';

shouldShrink(cat1, cat2) {
    return this.section === cat1 || this.section === cat2 ? false : true;
}

Здесь мне нужно вычислить, должен ли я сжимать div на основе того, соответствует ли две разные категории выбранным категориям. И это работает. Поэтому оттуда вы можете вычислить true/false для [ngClass] на основе того, что ваш метод возвращает с учетом ввода.

Ответ 6

<a [ngClass]="{'class1':array.status === 'active','class2':array.status === 'idle','class3':array.status === 'inactive',}">

Ответ 7

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

    [ngClass] = "{
    'badge-secondary': somevariable  === value1,
    'badge-success': somevariable  === value1,
    'badge-danger': somevariable  === value1,
    'badge-warning': somevariable  === value1,
    'badge-warning': somevariable  === value1,
    'badge-success': somevariable  === value1 }" 

класс здесь не является обязательным, потому что должно быть выполнено одно условие, в то время как у вас есть два идентичных класса 'badge-warning', которые могут иметь два разных условия, чтобы исправить это

 [ngClass] = "{
    'badge-secondary': somevariable === value1,
    'badge-success': somevariable  === value1,
    'badge-danger': somevariable  === value1,
    'badge-warning': somevariable  === value1 || somevariable  === value1, 
    'badge-success': somevariable  === value1 }" 

Ответ 8

Я надеюсь, что это один из основных условных классов

Решение: 1

<section [ngClass]="(condition)? 'class1 class2 ... classN' : 'another class1 ... classN' ">

Решение 2

<section [ngClass]="(condition)? 'class1 class2 ... classN' : '(condition)? 'class1 class2 ... classN':'another class' ">