Angular4 - 基於參數的值應用類

Question

我試圖根據傳遞給div的值動態創建bootstrap badges。

HTML

<div 
    *ngFor="let tag of event.tags"> 
    <span [ngClass]="setTagClass('tag')"> 
    {{tag}} 
    </span> 
</div> 

組件功能

public setTagClass(tag){ 
    switch (tag) { 
     case 'Gaming': { 
     'badge badge-pill badge-default'; 
     break; 
     } 
     case 'Home': { 
     'badge badge-pill badge-success'; 
     break; 
     } 
     case 'Social': { 
     'badge badge-pill badge-primary'; 
     break; 
     } 
    } 
    } 

但是它給了我一個_co.setClass is not a function錯誤的垃圾郵件。

在此之前，我試圖做的是菊花鏈動態版本。 IE：

<div 
    *ngFor="let tag of event.tags"> 
    <span [ngClass]="{'badge badge-pill badge-default': tag == 'Gaming', 
        'badge badge-pill badge-primary': tag == 'Social' 
    }"> 
    {{tag}} 
    </span> 
</div> 

醜 - 但體面的概念......除了沒有 -

出於某種原因，最後的徽章被渲染會議要求正確看 - 但在此之前它的那些失去的badge badge-pill部分的班，但保持了badge-{color}部分，所以它看起來像一個亮點。

我在ngClass,class.class等網站上看到很多不同的信息，並且不確定哪一個是做這項工作的正確選擇。我覺得這應該屬於控制器，但我似乎無法使其反饋到視圖。

Answer 1

您已將tag作爲字符串傳遞給函數 - 'tag'。從表達式中刪除''，然後從函數返回結果。

<div 
    *ngFor="let tag of event.tags"> 
    <span [ngClass]="setTagClass(tag)"> 
    {{tag}} 
    </span> 
</div> 

功能

public setTagClass(tag) { 
    switch (tag) { 
     case 'Gaming': 
     return 'badge badge-pill badge-default'; 
     case 'Home': 
     return 'badge badge-pill badge-success'; 
     case 'Social': 
     return 'badge badge-pill badge-primary'; 
    } 
}