Question

我正在使用Angular 4，我遇到了条件样式更改的问题。我有一张桌子和价值观。我需要根据连接或断开的值来更改列中的值。例如 - 如果值已连接，则它将显示为ON。如果该值断开，它将显示OFF

下面有我的代码片段，但它不能像我想的那样工作：

<ion-note *ngIf="selectedLaptop?.state.label" item-end>
            {{ selectedLaptop?.state.label }}
          </ion-note>

如果数据库中的state.label =“connected”我要显示ON 否则我想显示OFF

Answer 1

首先，您应该使用图标库。我不能告诉你哪一个，这取决于你。

然后，您可以使用标签的值来显示将显示图标的条件。

<ion-note *ngIf="selectedLaptop?.state.label" item-end>
  <icon>{{ selectedLaptop.state.label === 'ON' ? 'checkmark' : 'forbidden' }}</icon>
</ion-note>

N.B。：你也可以用图像做到这一点

<ion-note *ngIf="selectedLaptop?.state.label" item-end>
  <img [src]="selectedLaptop.state.label === 'ON' ? 'checkmark.jpg' : 'forbidden.jpg'">
</ion-note>

更改内容取决于值

1 个答案: