YuShu Hsiao

ngClass後面可以接三種類型的參數：

1. 字串：例如[ngClass]="'classRed, classBlue'"

2. 陣列：例如[ngClass]="['classRed', 'classBlue']"

   也可以透過與Component對應的程式連動

   如下面的例子

   在component.html內 寫了兩個RadioButton，透過Click事件連動compontent.ts內的變數(this.spanValue)，在馬上改變畫面上span內的顏色

<div class="container">
  <div class="row">
    <div>
      <div class="">
        <input name="group100" type="radio" id="radio100" (click)="RdoClick($event)" value="Red">
        <label for="radio100">Red</label>
      </div>

      <div class="">
        <input name="group100" type="radio" id="radio101" (click)="RdoClick($event)" checked value="Blue">
        <label for="radio101">Blue</label>
      </div>
      <div>
        <span [ngClass]="GetSpanClass()">會被影響顏色的文字</span>
      </div>
    </div>
  </div>
</div>

component.ts

  spanValue = 'ClassBlue';
  rdoValue = '';

  //Radion Button click event
  RdoClick($event) {

    this.rdoValue = $('input[name=group100]:checked').val().toString();

    //判斷目前Radio Button是按哪個值，修改this.spanValue
    if (this.rdoValue == 'Red') {
      this.spanValue = 'ClassRed';
    }
    else if (this.rdoValue == 'Blue') {
      this.spanValue = 'ClassBlue';
    }
  }

  //component.html內[ngClass]的值直接連動這個Method
  GetSpanClass() {
    return this.spanValue;
  }

3.以物件的方式來設定[ngClass]內的資料 例如[ngClass]="{'classA': true, 'classB': false}"

Ex:

先在component.css內定義class

.TextDone{
  text-decoration: line-through;
}

接著在之前寫的範例內測試效果

<ul>
  <li *ngFor="let item of items">
    <label for="chk_{{item.id}}">
      <input type="checkbox" name="" id="chk_{{item.id}}" [(ngModel)]="item.done" [checked]="item.done">{{item.value}}
    </label>
    <a href="#" (click)="delTodoItem(item,item.id)">&nbsp; Delete</a>
    <span *ngIf="item.done" [ngClass]="{TextDone:item.done}">(已完成)</span>
  </li>
</ul>

重點是這行

<span *ngIf="item.done" [ngClass]="{TextDone:item.done}">(已完成)</span>

item.done 型態是boolean，TextDone這個class 會隨著我點選checkbox 而決定要不要出現