Bootstrap Fortschrittsbalken mit Winkel 4

Question

Ich bin neu in eckigen und ich bin nicht in der Lage zu verstehen, wie Bootstrap Fortschrittsbalken mit Angular verwenden.

unten ist die Bootstrap-Dokumentation

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<div class="progress"> 
 
    <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"> 
 
    60% 
 
    </div> 
 
</div>

Ich versuche, das obige Ergebnis mit Winkel zu bekommen. Die Breite% wird in einer Variablen {{capacity.available}} gespeichert

Also mache ich folgendes, aber es gibt mir nicht das erwartete Ergebnis.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
    <div class="progress"> 
 
     <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width:{{capacity.available}}"> 
 
     60% 
 
     </div> 
 
    </div>

Warnmeldung in der Konsole sieht aus wie unsicher Stil Wertsbreite Hygienisierung: 54

Was mache ich falsch? Irgendwelche Vorschläge, wie das gemacht werden kann?

Vielen Dank für jede Hilfe im Voraus

Answer 1

ersetzen

style="width:{{capacity.available}}%" 

mit diesem (in Winkel Art und Weise geschehen)

[style.width]="capacity.available + '%'"