Wie man Eckige 5 Variablen an LESS-Variable bindet?

Question

Ich verwende diese weniger radiale Leiste auf einer Angular 5 App. Im Moment befindet es sich in einer HTML-Vorlage für eine Komponente, und die Nummer für "Datenverarbeitung" ist fest mit 75 codiert. Ich kann alle anderen Elemente auf der Seite mithilfe von eckigen Binding-Klammern an mein TypeScript binden, sodass die Daten verfügbar sind . Aber wie kann ich Angular-Daten an eine LESS-Variable übergeben?

Ich dachte daran, den HTML-Code im Handumdrehen zu generieren und über document.getElementById in ein DIV einzufügen, aber das fügt nur den Rohcode auf der Seite ein. Mein Ziel ist es, HTML und LESS von dieser JS-Fiddle zu verwenden, aber in der Lage, den hartcodierten Wert von 75 über TypeScript zu ändern.

http://jsfiddle.net/andydesrosiers/fwaLt99a/

<div class="radial-progress" data-progress="75"> 

Answer 1

Sie werden nicht auf eine weniger variable binden, sind Sie binding to an HTML element attribute nur data-progress genannt:

<div class="radial-progress" [attr.data-progress]="progress"> 

Und in Ihrem Component, die öffentliche Membervariable aktualisieren aufgerufen progress, die Sie gerne deklarieren würden:

progress: number = 0; 

Dann können Sie einfach Ihren Geigencode im Wesentlichen wörtlich verwenden.

Sie müssen möglicherweise