Question

我试图创建一个简单的轮播，然后单击以更新元素上的style.transform来更新translate3d，以便它可以移动。绑定在组件中的变量会更新，但不会在dom上更新。

slide函数是触发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)`
    }    
  }

}

这是我的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>

Answer 1

我没有在数字后加上px。

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

1 个答案: