将 *ngIf 与 Ionic 一起使用

Question

早上好。 我正在开发一个应用程序，其中我在同一个数组（对象）上有客户和发票。 问题是我将它们全部显示出来，并且有一个名为 client 的布尔属性，它指示此对象是客户还是发票（真假）。

我正在做一个向他们展示的事情，而我想做的是以发票以外的另一种方式向客户展示。

我试过了，效果很好：

<button ion-item *ngFor="let item of items" (click)="itemSelected(item)">
  {{ item.client? "Client" : item.text}}
</button>

但正如我所说，我想做的是更改客户端颜色，如果它们不在某个标签内，我将无法做到。我遇到的麻烦是如果它是客户端，则创建一个 if-else 来显示一个标签，如果不是，则显示另一个。

我也试过：

<button ion-item *ngFor="let item of items" (click)="itemSelected(item)">
  <p *ngIf="item.client == false">{{item.text}}</p>
  <p *ngIf="item.client == true">{{item.text}}</p>
</button>

但同样，作为其他事情它不起作用。 很高兴找到解决方案，谢谢！

Answer 1

以角度方式，您可以使用 ngClass 以获得更好的渲染效果。

例如：[ngClass]="{'first': true, 'second': true, 'third': false}"

根据条件调用css中的类。

你可以试试这个来解决问题。

<button ion-item *ngFor="let item of items" (click)="itemSelected(item)">
  <p [ngClass]="{'first': item.client=='Client', 'second': item.text=='data'}">{{item.client ? 'Client' : item.text}}</p>
</button>

ngClass 中的任何疑问请查看此链接https://angular.io/api/common/NgClass

我希望它会起作用

Answer 2

你可以这样做

 <p *ngIf="item.client">Client</p>
 <p *ngIf="!item.client">{{item.text}}</p>

Answer 3

试试这个...

<button ion-item *ngFor="let item of items" (click)="itemSelected(item)"
    [class.bg-client]="item.client" 
    [class.bg-invoice]="!item.client" >
  {{item.client ? 'Client' : item.text}}
</button>

bg-client 和 bg-invoice 可以替换为您的类。