Angular2 - установить другой цвет для элемента в зависимости от значения

Question

Я новичок в Angular2 и мне было интересно, как я могу установить цвет шрифта для элемента в зависимости от значения.

Мой сценарий таков: если значение поля ввода не равно 100, тогда я хочу, чтобы оно было красным, но если оно равно 100, тогда я хочу, чтобы оно было зеленым.

У меня есть следующий код на месте, но я не могу заставить его работать.

XXX.component.css

.red {
    color: red; 
}

.green {
    color: green;
}

XXX.component.css

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

Answer 1

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

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

NgStyle directive Ex:

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

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

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

2. Если вам нужно изменить класс, то вы можете использовать угловой NgClass Директива, которая добавляет и удаляет классы CSS для элемента HTML...

NgClass directive Ex:

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

Answer 2

Вы также можете связать свойство стиля.

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

Answer 3

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

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

Answer 4

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

Сделай это как:

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

Answer 5

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

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

Надеюсь, поможет!!