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

Angular4 - 根据param的值应用类

1 个答案: