Angular2-установить другой цвет элемента в зависимости от значения
Я новичок в Angular2
и было интересно, как я собираюсь установить цвет шрифта для элемента в зависимости от значения.
мой сценарий: если значение поля ввода не 100, то я хочу, чтобы он был красным, но если это 100, то я хочу, чтобы он был зеленым.
у меня есть следующий код в место, но не могу заставить его работать.
ХХХ.компонент.в CSS
.red {
color: red;
}
.green {
color: green;
}
ХХХ.компонент.в CSS
<input mdInput placeholder="Proportion '%'" [(ngModel)]="proportion ">
<p>hello <span ng-class='{red : proportion!= '100', green: proportion === '100'}'>{{proportion}}</span></p>
5 ответов
есть два решения для изменения цвета шрифта, но зависит от вас требование
- если вы требуете изменить встроенный стиль, то вы можете использовать angular
NgStyle
директива, которая обновляет стили элементов HTML для вас..
NgStyle directive Ex:
<span [ngStyle]="{'color': proportion === '100' ? 'green' : 'red'}"></span>
---------------------- OR -----------------------------------
<span [style.color]="proportion === '100' ? 'green' : 'red'"></span>
- если вы требуете изменить класс, то вы можете использовать angular
NgClass
директива, которая добавляет и удаляет классы CSS в HTML элемент...
NgClass directive Ex:
<span [ngClass]="{proportion === '100' ? 'green': 'red'}"></span>
вы можете использовать его как это:
<div class="card template-card" [ngClass]="{'z-depth-3': template == selectedTemplate, 'not-selected': !(template == selectedTemplate) && selectedTemplate != null}">
так как вы используете Angular2
, поэтому вам нужно использовать [ngClass]
, и ваша модель ввода привязывается к proportion
, поэтому используйте его для сравнения,
сделать это так :
<input mdInput placeholder="Proportion '%'" [(ngModel)]="proportion">
<p>hello <span [ngClass]="{'red': proportion !== '100', 'green': proportion === '100'}">{{username}}</span></p>
можно также привязать свойство style.
<span [style.color]="proportion === '100' ? 'green' : 'red'"></span>
вам нужно изменить свою логику, чтобы иметь двойные кавычки и ngModel долю стоимостью
<input mdInput placeholder="Proportion '%'" [(ngModel)]="proportion">
<p>hello <span [ngClass]="{red : proportion != '100', green: proportion === '100'}">{{username}}</span></p>
надеюсь, что это помогает!!