Question

我试图根据来自@input的属性有条件地将一个类应用于div，但是当针对非@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
}


}

Answer 1

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

尝试

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

Answer 2

重要的是，您列出的css类在其边框border-style: dashed上没有样式，或者其他什么，因此除了将类名附加到DOM之外，它们在渲染方面没有区别。但是，输入肯定是正确应用的。

我还建议你[ngClass]="{'active': active, 'inactive: !active}"为自己保留几个不必要的三元组。

无法根据@input评估Angular2中的ngClass

2 个答案: