Изменить содержимое в зависимости от значения

Я работаю с Angular 4, и у меня проблема с изменением условного стиля. У меня есть таблица и значения в ней. Мне нужно, чтобы значения в столбце изменялись в зависимости от того, подключено или отключено значение. Например, если значение подключено, то оно будет отображаться ON. Если значение отключено, оно будет отображаться OFF

Вот фрагмент моего кода, но он работает не так, как хотелось бы:

  <ion-note item-end>
      <span [class]="laptop.isConnected === 'true' ? 'dotOn' : 'dotOff'">{{ laptop.isConnected }}</span>
  </ion-note>

Если laptop.isConnected ="true" в базе данных, я хочу отобразить зеленый круг, который я уже создал в CSS.

В противном случае я хочу отобразить красный круг.

На данный момент я могу отображать только красный кружок, даже если это правда.


angular angular-template
person XerXs    schedule 21.06.2018    source источник
comment
не могли бы вы создать пример на stackblitz.com ?. у него больше ситуация, может быть причина в переменном типе или лайфхуке и т.д...   -  person Chunbin Li    schedule 21.06.2018

Ответы (1)


arrow_upward
0
arrow_downward 

<span [class.dotOn]="laptop.isConnected === 'true'"
      [class.dotOff]="laptop.isConnected !== 'true'">
  {{ laptop.isConnected }}
</span>

Вы также можете проверить содержимое и тип вашего свойства laptop.isConnected. Это действительно строка? :-)

Если бы это было логическое значение, true === 'true' не было бы истинным, поэтому ваше условие всегда оценивалось бы как вторая ветвь.

person Heehaaw    schedule 21.06.2018