跨度元素上的动态 CSS 类 - 角度 4

Posted 2023-03-06

【中文标题】跨度元素上的动态 CSS 类 - 角度 4

【英文标题】：dynamic css class on a span element - angular 4

【发布时间】：2019-01-07 00:31:07

【问题描述】：

我在表格中有一个 span 元素。我想根据值动态更改 css 类。

这是我的 html 代码：

    <table>
          <thead>
               <tr>
                  <th>Fruits</th>
                  <th>Colors</th>
               </tr>
          </thead>
          <tbody>
          <tr *ngFor="let data of fruits>
             <td>data.fruits</td>
             <td>
             <span class="badge badge-default badge-success">data.color</span>
             </td>
           </tr>
          </tbody>
</table>

我想根据我获得的数据显示徽章颜色。例如，如果我变红了，我想将徽章类别更改为徽章危险。如果我得到绿色，我想将课程更改为徽章成功等等。

如何在 Angular 4 中实现这一点？

谢谢

【参考方案1】：

1) 如果值来自对象中的枚举值怎么办 2) 有没有办法将所有 ngClass 逻辑放在一个组件方法中并执行以下操作：

<tbody>
    <tr *ngFor="let task of tasks">
        <td> task.title </td>
        <td> task.description </td>
        <td>
            <span class="label" [ngClass]=" getTaskLabel(task) " >task.taskstate</span>
        </td>
        <td>
    </tr>
</tbody>

【参考方案2】：

<span class="badge badge-default badge-success" [ngStyle]="data.color =='red' ? 'class': 'badge badge-danger' : 'class': 'badge badge-success'"></span>

您可以使用 ngStyle 属性和三元运算符，就像我提供的一样

【讨论】：

他问的是怎么改class，而不是style

什么鬼，现在它甚至不是有效的语法

***.com/questions/13813254/…

那是 angularJS，不是 angular 2+。也许这仍然可以在 angular2+ 中编译，但它是 not 标准语法。我不会在代码审查中通过它。 ngStyle 用于直接修改属性。 ngClass 用于修改类。不要越过溪流。

【参考方案3】：

试试这个方法

<span class="badge badge-default" [ngClass]="
    'badge-success':data.color === 'green',
    'badge-warning':data.color === 'yellow',
    'badge-success-danger':data.color === 'red'
  ">
  </span>

【参考方案4】：

<span class="badge badge-default" [ngClass]="'badge-danger': data.color === 'red', 'badge-success': data.color === 'green' ></span>

您可以在 Angular 中使用 ngClass 指令。参数为 'class-name':condition ，如果 condition 为真，则将 class-name 添加到元素中。

在此处阅读有关 ngClass 的更多信息：https://angular.io/api/common/NgClass