Angular中如何根据布尔值切换已付/未付状态的图标样式

开发者阿泽

2026-7-14

问题描述

现有Angular表格代码如下：

<tr *ngFor="let invoice of invoices; let i = index">
    <td>{{ i + 1 }}</td>
    <td>{{ invoice.number }}</td>
    <td>{{ invoice.client.name }}</td>
    <td>{{ invoice.paid }}</td>
</tr>

其中invoice.paid为布尔值，需实现：

当invoice.paid为true（已付）时，显示带绿色样式的图标，对应类名：pe-7s-close-check pe-lg pe-va text-success
当invoice.paid为false（未付）时，显示带红色样式的图标，对应类名：pe-7s-close-circle pe-lg pe-va text-danger

解决方案

可以通过Angular的属性绑定或ngClass指令实现需求，以下是两种常用方式：

方式一：使用`ngClass`对象语法

通过对象语法根据布尔值动态匹配类名，可读性更强：

<tr *ngFor="let invoice of invoices; let i = index">
    <td>{{ i + 1 }}</td>
    <td>{{ invoice.number }}</td>
    <td>{{ invoice.client.name }}</td>
    <td>
        <i [ngClass]="{
            'pe-7s-close-check pe-lg pe-va text-success': invoice.paid,
            'pe-7s-close-circle pe-lg pe-va text-danger': !invoice.paid
        }"></i>
    </td>
</tr>

方式二：使用三元表达式绑定class属性

逻辑简单时，用三元表达式直接绑定class属性更简洁：

<tr *ngFor="let invoice of invoices; let i = index">
    <td>{{ i + 1 }}</td>
    <td>{{ invoice.number }}</td>
    <td>{{ invoice.client.name }}</td>
    <td>
        <i [class]="invoice.paid 
            ? 'pe-7s-close-check pe-lg pe-va text-success' 
            : 'pe-7s-close-circle pe-lg pe-va text-danger'"></i>
    </td>
</tr>