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>
7
angular angular2-forms angular2-template

5 ответов

есть два решения для изменения цвета шрифта, но зависит от вас требование

  1. если вы требуете изменить встроенный стиль, то вы можете использовать angular NgStyle директива, которая обновляет стили элементов HTML для вас..

NgStyle directive Ex:

<span [ngStyle]="{'color': proportion === '100' ? 'green' : 'red'}"></span>

        ---------------------- OR -----------------------------------

<span [style.color]="proportion === '100' ? 'green' : 'red'"></span>
  1. если вы требуете изменить класс, то вы можете использовать angular NgClass директива, которая добавляет и удаляет классы CSS в HTML элемент...

NgClass directive Ex:

<span [ngClass]="{proportion === '100' ? 'green': 'red'}"></span>
15

вы можете использовать его как это:

 <div class="card template-card" [ngClass]="{'z-depth-3': template == selectedTemplate, 'not-selected': !(template == selectedTemplate) && selectedTemplate != null}">
1

так как вы используете Angular2, поэтому вам нужно использовать [ngClass], и ваша модель ввода привязывается к proportion, поэтому используйте его для сравнения,

сделать это так :

<input mdInput placeholder="Proportion '%'" [(ngModel)]="proportion">
<p>hello <span [ngClass]="{'red': proportion !== '100', 'green': proportion === '100'}">{{username}}</span></p>
1

можно также привязать свойство style.

<span [style.color]="proportion === '100' ? 'green' : 'red'"></span>
1

вам нужно изменить свою логику, чтобы иметь двойные кавычки и ngModel долю стоимостью

<input mdInput placeholder="Proportion '%'" [(ngModel)]="proportion">
<p>hello <span [ngClass]="{red : proportion != '100', green: proportion === '100'}">{{username}}</span></p>

надеюсь, что это помогает!!

0