Question

我在以下html上使用ngClass指令：

<i [ngClass]="{'fa fa-check': value, 'fa fa-cross':!value}"></i>

value == false时，它可以正常运行 - 它会向图标添加fa fa-cross。但是，在value == true时，它只会向元素添加fa-check。

请参阅plnkr。

关于我哪里出错的任何想法？

由于

Answer 1

当您将其更改为此内容时，它将起作用：

<i class="fa" [ngClass]="{'fa-check': value, 'fa-cross':!value}"></i>

这是plnkr。我还将fa-cross更改为fa-times，因此我们可以看到更改。

Answer 2

这就是ngClass的工作方式。它切换了类。

您的条件的初始值为false，因此会添加fa fa-cross。当条件更改为true时，将删除这两个类并添加fa-check。

这是一个非常好的explanation of how ngClass works。感谢@galpalk提供了惊人的答案。

我建议你做@uksz的回答。这是正确的答案。

Answer 3

在模板中设置类逻辑的替代方法，您可以在组件中实现getter：

import {Component} from 'angular2/core';
import {FORM_DIRECTIVES,NgClass} from 'angular2/common';


@Component({
  selector: 'main-view',
  template: `<h1> Main View </h1>
<input type="checkbox" [(ngModel)]="value">
<i [ngClass]="checkboxClass"></i>
        `,
  directives:[FORM_DIRECTIVES,NgClass]
})

export class MainViewComponent{

  constructor(){
        this.value = false;
  }

  public get checkboxClass(): string {
    return this.value ? 'fa fa-check' : 'fa fa-times';
  }

}

Plunkr

Answer 4

NgClass

对象 - 每个键对应一个CSS类名称，而值是解释为评估为布尔值的表达式。如果给定表达式求值为true，添加了相应的CSS类 - 否则会被删除。

强调我的。

看起来它显式删除了被评估为false的类。因此，虽然它是在真实情况下添加的，但它也会因错误情况而被删除。有趣的是，它似乎按键的顺序执行添加/删除类，因此如果您首先执行非案例，则会删除"{'fa fa-cross':!value,'fa fa-check': value}"，然后再次为您的真实案例添加它。

Editor.prototype.getHandlers = function() {
  return {
    'shape.append': require('./draw/AppendShapeHandler'),
    'shape.create': require('./draw/CreateShapeHandler')
  };
};

http://plnkr.co/edit/V9l9Gv2dnyZJA1ovubni?p=preview

我相信uksz解决方案是正确的方法，也就是说，将类显式添加到标记中，因为它适用于两种情况。

NgClass没有在true上添加所有指定的类

4 个答案: