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

你可以做

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

Answer 2

尝试一下...

<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客户端和 bg发票可以替换为您的课程。

Answer 3

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

ex： [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

我希望它会起作用

将* ngIf与Ionic一起使用

3 个答案: