Question

我需要在ngClass表达式中插入一个值，但我无法使其工作。

我尝试了这些解决方案，这是唯一对我有意义的解决方案，这两个解决方案因插值而失败：

<button [ngClass]="{'{{namespace}}-mybutton': type === 'mybutton'}"></button>
<button [ngClass]="{namespace + '-mybutton': type === 'mybutton'}"></button>

这个用于插值但是在动态添加的类中失败，因为整个字符串被添加为一个类：

<button ngClass="{'{{namespace}}-mybutton': type === 'mybutton'}"></button>

所以我的问题是你如何在ngClass这样使用动态类名呢？

Answer 1

尝试

<button [ngClass]="type === 'mybutton' ? namespace + '-mybutton' : ''"></button>

代替。

或

<button [ngClass]="[type === 'mybutton' ? namespace + '-mybutton' : '']"></button>

甚至

<button class="{{type === 'mybutton' ? namespace + '-mybutton' : ''}}"></button>

会起作用，但使用 ngClass 的额外好处是不会覆盖由任何其他方法添加的其他类（例如：[class.xyz]指令或class的{{1}}属性等。

ngClass有三种类型的输入

对象：每个键对应一个CSS类名，您不能拥有动态键，因为class key 'key'都是相同的，并且不支持"key" AFAIK。
数组：只能包含类列表，没有条件，尽管三元运算符可以正常工作
字符串/表达式，就像普通的类属性一样

Answer 2

这个应该有效

<button [ngClass]="{[namespace + '-mybutton']: type === 'mybutton'}"></button>

但是Angular会抛出这种语法。我认为这是一个错误。另请参阅https://stackoverflow.com/a/36024066/217408

其他人无效。您无法将[]与{{}}一起使用。一个或另一个。 {{}}绑定了字符串化的结果，在这种情况下不会导致所需的结果，因为需要将对象传递给ngClass。

Plunker example

解决方法@A_Sing或

显示的语法

<button [ngClass]="type === 'mybutton' ? namespace + '-mybutton' : ''"></button>

可以使用。

Answer 3

这是我在多个条件的情况下为多个类做的事情的一个示例：

[ngClass]="[variableInComponent || !anotherVariableInComponent ? classes.icon.large : classes.icon.small, editing ? classes.icon.editing : '']"

其中：
classes是一个包含各种类名字符串的对象。例如class.icon.large = "app__icon--large"

这是动态的！随着条件的更新而更新。

Answer 4

for files in csv_file_list:
        with open(files, 'r') as r: 
            next(r)                  #skip headers             
            rr = csv.reader(r)
            for row in rr:
                #do something

Answer 5

您可以使用<i [className]="'fa fa-' + data?.icon"> </i>

Answer 6

基本上是其他答案的重复-但我没有完全理解。也许有人现在终于可以通过这个例子了。

[ngClass]="['svg-icon', 'recolor-' + recolor, size ? 'size-' + size : '']"

将导致例如在

class="svg-icon recolor-red size-m"

Answer 7

更优雅的解决方案是使用&&（使用NgFor及其first，可以自由使用自己的匹配项）：

    <div 
        *ngFor="let day of days;
                let first = first;"
        class="day"
        [ngClass]="first && ('day--' + day)"
    </div>

结果将为：

class="day day--monday"

Answer 8

我想提到实现类绑定时要记住的一些重要点。

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

此处的

类未正确绑定，因为要满足一个条件，而您有两个相同的类“徽章警告”，它们可能具有两个不同的条件。要纠正此问题

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

ngClass中的动态类名，角度为2

8 个答案: