Угловой параметр, кажется, не влияет на стиль

Question

У меня есть следующий угловой шаблон Пример StackBlitz :

<div class="progress">
  <div class="complete" style="width: {{progress}}%">&nbsp;</div>
</div>

<p>{{progress}}%</p>

Код width: {{progress}}% не работает, но если я заменю его на width: 60%, тогда он будет работать.

И код <p>{{progress}}%</p> отображает правильное значение ...

Код компонента:

export class ProgressComponent implements OnInit {

  @Input() current: any;
  @Input() minimum: any;
  @Input() maximum: any;

  progress: number;

  ngOnInit() {
    this.progress = 100 * (this.current - this.minimum) / (this.maximum - this.minimum);
  }

}

Есть идеи, что мне не хватает?

Answer 1

Вы можете попробовать:

 <div class="complete" [ngStyle]="{width: progress + '%'}">&nbsp;</div>

Answer 2

вам нужно связать встроенный стиль в ваших шаблонах Angular 2.Вот как можно привязать одно значение стиля, например:

<p [style.background-color]="'red'">
  my background is red
</p>

, поэтому ваш обновленный код будет иметь вид -

<div class="progress">
  <div class="complete" [style.width.%]="progress">&nbsp;</div>
</div>

<p>{{progress}}%</p>

Кроме того, : вы также можетеиспользуйте px, em вместо %.

, здесь вы можете установить условие.

<p [style.font-size.px]="isItGreaterThan60 ? '60' : '16'">
  I am some text
</p>

Это для одного имущества.что мы будем делать, если нам нужно применить несколько стилей?[ngStyle] является спасителем.

[ngStyle] для нескольких стилей

<p [ngStyle]="{ 'background-color': 'red', 'font-size': '30px', 'width':'60%' }">
 I am multiple styles
</p>

вы можете написать CSS в HTML или добавить свойство в файл компонента TSи использовать его в HTML.вот так -

<p [ngStyle]="myStyles">
    I am for multiple styles.
</p>

'myStyles' - это объект вашего компонента.Итак, в вашем компоненте

myStyles = {
 'background-color': 'red',
 'font-size': '30px',
 'width': '60%'
}

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

<p [ngStyle]="getMyStyles()">
    my styles comes from a function
</p>

Answer 3

Примерно так:

<div class="progress">
    <div class="complete" [style.width.%]="progress">&nbsp;</div>
</div>