Angular 2 - 根据数组字符串添加 class？

Question

我正在尝试使用组件中的数组生成此列表：

  billChecklist = [
    {
      title: "mortgage",
      every: "1st",
      amount: "00",
      status: "paid"
    }];

我的 HTML 有一个 For LET 循环，它工作正常：

<tbody *ngFor="let bills of billChecklist">
    <tr>
       <td>{{bills.every}}</td>
       <td>{{bills.title}}</td>
       <td>{{bills.amount}}</td>
       <td><span class="glyphicon" [ngClass]="{'glyphicon-ok': bills.status==='paid'}" aria-hidden="true"></span></td>
    </tr>
</tbody>

最后，我有一个跨度，我想根据上面数组中的内容放置 "glyphicon-ok"。

我尝试执行条件 ngClass，但在使用数组变量 {{bills.paid}} 时出现错误，或者在使用下面的变量时出现错误。

[ngClass]="{'glyphicon-ok': bills.status==='paid'}"

任何帮助将不胜感激。

Answer 1

您可以设置 class 如下：

...[class.glyphicon-ok] = "bills.status==='paid'" ...

查看更多here 和

> <div [class.extra-sparkle]="isDelightful">   Binds the presence of the
> CSS class extra-sparkle on the element to the truthiness of the
> expression isDelightful.

来自 here

Answer 2

你也可以做一个完整的三元条件

<span [ngClass]="{bills.status==='paid' ? 'glyphicon-ok' : 'glyphicon-other'}"></span>

Angular 2 - 根据数组字符串添加 class？

Angular 2 - Add class based on array string?

conditional

angular2-template

angular