英文:
How to filter a boolean in angular
问题
所以我需要用这些来表示真和假：
> "pe-7s-close-check pe-lg pe-va text-success" "pe-7s-close-circle
> pe-lg pe-va text-danger"。
我有一个HTML代码：
<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>
invoice.paid 是布尔值，所以当它已支付时应该是绿色，未支付时应该是红色，我应该怎么做呢？类似这张图片：
英文:
So I need to use these for true and false:
> "pe-7s-close-check pe-lg pe-va text-success" "pe-7s-close-circle
> pe-lg pe-va text-danger".
I have a html code:
<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>
invoice.paid is the boolean here,so when its paid it sould be green when not paid red how should I do it?
Something like this picture:
答案1
得分: 1
<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>
英文:
<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>
答案2
得分: 0
尝试这个
`<td [ngClass]="{invoice.paid ? 'pe-7s-close-check pe-lg pe-va text-success' : 'pe-7s-close-circle pe-lg pe-va text-danger'}"></td>`
[Angular ngClass 指令][1]
[1]: https://docs.angularjs.org/api/ng/directive/ngClass
英文:
Try this
<td [ngClass]="{invoice.paid ? 'pe-7s-close-check pe-lg pe-va text-success' : 'pe-7s-close-circle pe-lg pe-va text-danger'}"></td>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论