각도 2 CSS 선택기 및 html 속성으로 값 추가

Question

각도 2 프로젝트에 다음 진행률 막대를 추가하고 싶습니다.하지만 값 필드에 사용중인 구성 요소의 데이터를 전달할 수 있도록 전환을 사용하고 싶습니다.

https://codepen.io/JMChristensen/pen/Ablch

내가 고민하고있어 CSS와 HTML 선택기에 대한 참조입니다 : 이것은 내가 사용하려는 진행 막대입니다. 예를 들어 진행률 표시 줄은 다음을 사용합니다 :

var $circle = $('#svg #bar'); 
var r = $circle.attr('r'); 
var c = Math.PI*(r*2); 
$circle.css({ strokeDashoffset: pct});   
$('#cont').attr('data-pct',val); 

JQUERY를 사용하지 않고 각도 2에서 이러한 유형의 동작을 수행하려면 어떻게해야합니까?

Answer 1

1. 는 circle하기 : r를

   var circle = document.getElementById("bar");

2. 방법 :

   var r = circle.r; var c = Math.PI*(r*2);

3. 는 strokeDashoffset 설정 :

   을

   circle.style.strokeDashoffset = pct;

4. data-pct 설정 :

   document.getElementById("cont")["data-pct"] = val;