Can'；t基于@input以Angular2评估ngClass

我试图根据@input的一个属性有条件地将一个类应用到div，但当针对not@input属性（如下面的test_active）计算相同的条件时，它的计算结果是错误的。表达式工作正常

我可以在init（）函数中对console.log（）属性的值进行控制台操作，并得到正确的值

下面是我的组件的示例代码

import {Component, OnInit, Input} from '@angular/core';

@Component({
  selector: 'app-avatar',
  template: `
    <div 
      id="avatar" 
      [ngClass]="{'active': active?true:false, 'inactive': active?false:true}"
    ></div>
  `,
  styles: [
...
    `#avatar.active { border-color: #77ED00;}`,
    `#avatar.inactive {filter: grayscale(100%); border-color: red}`
  ]
})
export class AvatarComponent implements OnInit {

  @Input() active;

  test_active = true;


  constructor() { }

  ngOnInit() {
    console.log(this.active); //true
}


}

从'@angular/core'导入{Component，OnInit，Input}；
@组成部分({
选择器：'应用程序化身'，
模板：`
`,
风格：[
...
`#avatar.active{边框颜色：#77ED00；}`，
`#avatar.inactive{过滤器：灰度（100%）；边框颜色：红色}`
]
})
导出类AvatarComponent实现OnInit{
@输入（）激活；
test_active=true；
构造函数（）{}
恩戈尼尼特（）{
console.log（this.active）；//true
}
}

我假设您将值作为字符串传递给输入

试一试

---

我假设您将值作为字符串传递给输入

试一试

---

重要的是，您列出的css类的边框上没有样式

边框样式：虚线

实线，或者其他任何样式，因此除了将类名附加到DOM之外，它们在渲染时没有任何区别。不过，输入的应用肯定是正确的

---

我还建议您使用

[ngClass]=“{'active'：active，'inactive:！active}”

来节省一些不必要的ternaries。

重要的是，您列出的css类边框上没有样式

边框样式：虚线

实线，或者不管怎样，除了将类名附加到DOM之外，它们在呈现方面没有任何区别。不过，输入的应用肯定是正确的

我还建议您使用

[ngClass]=“{'active'：active，'inactive:！active}”

来节省一些不必要的ternaries。

在这里可以正常工作：。在plunkr中发布相关代码以重现问题。在此处可以正常工作：。在plunkr中发布相关代码，以复制问题。

<app-avatar [active]="true"></app-avatar>
<app-avatar [active]="false"></app-avatar>