Javascript Angular 2在运行时指定css样式

我正在尝试使用Angular 2创建链接的圆形排列。我有一个函数，可以根据圆圈中的链接数量，为每个链接设置

style.left

和

style.top

的固定位置。我曾尝试在组件的构造函数中使用此代码，但Angular未能生成，这给了我一个错误，

items.length

属性为空

下面是我的组件类代码，它是typescript和javascript的混合体：

export class PlayersComponent {
items: any;
constructor() {
  this.items = document.querySelector('.circle');
  for(var i = 0, l = this.items.length; i < l; i++){
    this.items[i].style.left = (50 - 35*Math.cos(-0.5 * Math.PI - 2*(1/l)*i*Math.PI)).toFixed(4) + "%";
    this.items[i].style.top = (50 + 35*Math.sin(-0.5 * Math.PI - 2*(1/l)*i*Math.PI)).toFixed(4) + "%";
  }
}

导出类播放器组件{
项目：任何；
构造函数（）{
this.items=document.querySelector（“.circle”）；
for（var i=0，l=this.items.length；i

而不是访问构造函数内部的元素。您必须实现AfterViewInit和访问ngAfterViewInit方法内部的元素

DOM在viewInit之后初始化。请检查

请参阅以下代码：

import {Component,AfterViewInit} from '@angular/core'; 
export class PlayersComponent implements AfterViewInit{
  items: any;
  ngAfterViewInit() {
     this.items = document.querySelector('.circle');
     for(var i = 0, l = this.items.length; i < l; i++){
        this.items[i].style.left = (50 - 35*Math.cos(-0.5 * Math.PI - 2(1/l)*i*Math.PI)).toFixed(4) + "%";
        this.items[i].style.top = (50 + 35*Math.sin(-0.5 * Math.PI - 2*(1/l)*i*Math.PI)).toFixed(4) + "%";
  }
}

从'@angular/core'导入{Component，AfterViewInit}
导出类PlayerComponent实现AfterViewInit{
项目：任何；
ngAfterViewInit（）{
this.items=document.querySelector（“.circle”）；
for（var i=0，l=this.items.length；i

---

如果有帮助，请将其标记为答案！！！

只是一个旁注，构造函数用于依赖项注入，而不是用于执行“工作”，您应该在ngOnInit（）中执行此操作；请参见此处：它也是角度和非角度的混合体。请阅读指南如何使用角度编程您应该改为样式绑定

[style.left.px]=“样式值[索引]”

或

ngStyle