Javascript Angular 6 style.property或ngStyle在组件中更新绑定变量时不更新

我正在尝试创建一个简单的旋转木马，并在单击时尝试更新元素上的style.transform以更新translate3d，使其移动。组件中绑定的变量会更新，但不会在dom中更新

滑动函数触发translate3d中的更改，并更新组件内部的变量。它只是不在dom上更新

当我动态更改style.width.px时，它会起作用

这是我的组件

export class RecentNewsSliderComponent implements OnInit, AfterViewInit {    

  @ViewChild('recentNewsSlider') recentNewsSlider;
  @Input() articles;

  newsContainerWidth: number;
  carousel: any = {};

  constructor() { }

  ngOnInit() {
    this.setUpCarousel();
  }

  ngAfterViewInit() {
    setTimeout(() => this.newsContainerWidth = this.getNewsContWidth(), 500);
  }

  setUpCarousel() {
    this.carousel.articlesLength = this.articles.length;
    this.carousel.controls = [];
    this.carousel.transform3d = 'translate3d(0, 0, 0)';
    let controlsNum = Math.ceil(this.articles.length / 3);

    for(let i = 0; i < controlsNum; i++) {
      this.carousel.controls.push({ i: i, active: i === 0 ? true : false });
    }
  }


  getNewsContWidth() {
    let totalWidth = 0;
    let children = Array.from(this.recentNewsSlider.nativeElement.children);    

    children.forEach((x: any) => {      
      totalWidth += x.offsetWidth;
    });

    this.carousel.containerWidth = totalWidth + (children.length * 20);

    return totalWidth + (children.length * 20);
  }

  slide(control) {
    let scrollTo = this.carousel.containerWidth /     this.carousel.controls.length;

    if(control.i === 0) {
      this.carousel.transform3d = 'translate3d(0, 0, 0)';
    } else {
      this.carousel.transform3d = `translate3d(${scrollTo}, 0, 0)`
    }    
  }

}

导出类RecentNewsSliderComponent实现OnInit，AfterViewInit{
@ViewChild（'recentNewsSlider'）recentNewsSlider；
@输入（）文章；
newsContainerWidth：编号；
转盘：任意={}；
构造函数（）{}
恩戈尼尼特（）{
这个.setUpCarousel（）；
}
ngAfterViewInit（）{
setTimeout（（）=>this.newsContainerWidth=this.getNewsContWidth（），500）；
}
旋转木马{
this.carousel.articlesLength=this.articles.length；
this.carousel.controls=[]；
this.carousel.transform3d='translate3d（0,0,0）'；
让controlsNum=Math.ceil（this.articles.length/3）；
for（设i=0；i{
总宽度+=x.offsetWidth；
});
this.carousel.containerWidth=总宽度+（children.length*20）；
返回totalWidth+（children.length*20）；
}
滑动（控制）{
设scrollTo=this.carousel.containerWidth/this.carousel.controls.length；
if（control.i==0）{
this.carousel.transform3d='translate3d（0,0,0）'；
}否则{
this.carousel.transform3d=`translate3d（${scrollTo}，0，0）`
}    
}
}

这是我的HTML

<div class="news-wrapper container">
    <div #recentNewsSlider class="news-container" [style.width.px]="newsContainerWidth" [style.transform]="carousel.transform3d">
        <div *ngFor="let article of articles">
          <div class="news-article">
            <img src="{{ article.image }}">
            <div class="rollover">
              <h4>{{ article.title }}</h4>
              <button class="small">Read</button>
            </div>
          </div>
        </div>
    </div>
    <div class="row">
      <div class="col-md-12">
        <div class="news-control">
          <div class="dot" *ngFor="let control of carousel.controls" [ngClass]="{ 'active' : control.active }" (click)="slide(control)"></div>
        </div>
      </div>
    </div>
</div>

{{article.title}}
阅读

我没有在数字后面加上px