angular4 样式属性总结

1.如果 item.remark（值为空）不存在的时候，显示“未填写”，同时添加font-gray这个样式，如图：

2.点击li添加样式

       1）.

       2）.

       3）.此外selectedHero这个字段还要声明一下

3.同时添加好几个颜色样式

      1）. 

      2）.

             为true时显示这个样式，false不显示这个样式

eg:点击切换添加几个样式

a:html:

<div [ngClass]="{'first': classFlag, 'second': classFlag, 'third': !classFlag}">欧尼酱</div>
<button (click)="changeClass()">切换</button>

b.css:

.first {
  font-size: 58px;
}
.second {
  color:orange;
}
.third {
  font-weight: bolder
}

c.ts:

  classFlag = true;
  changeClass(): void {
    this.classFlag = !this.classFlag;
  }

楼上例子的简单写法：（css不修改）

html修改如下：

 <div [ngClass]="classObject">欧尼加油</div>
  <button (click)="changeClass()">切换</button>

 ts修改如下：

  classFlag = false;
  classObject: Object = {}
  // 动态控制类名
  changeClass(): void {
    this.classFlag = !this.classFlag;
    this.classObject = {
      "first": this.classFlag,
      "second": !this.classFlag,
      "third": this.classFlag
    }
  }