javascript - Angular - 根据参数值应用类

Question

我正在尝试根据传递给 div 的值动态创建引导徽章。

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 等的不同信息，并且不确定哪一个是完成这项工作的正确选择。我觉得这应该属于 Controller ，但我似乎无法将其反馈到 View 。

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';
    }
}