Question

问题出在我用警告检查过的函数中的slideIndex。首先，其值为0，然后未定义，然后this.slideIndex++;的值为NaN。为什么会发生这种情况，解决方法是什么。应该每2秒切换一次图像。最初显示该图像，但由于该slideIndex问题，两秒钟后未显示任何图像。我从这里获得的js部分-https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_slideshow_auto

在ng viewInit内部工作，而无需调用函数。为什么在函数内部不能正常工作？

ngAfterViewInit() {
   setInterval(()=>{
    var i;
    let slides = document.getElementsByClassName("xx");
    for (i = 0; i < slides.length; i++) {
      //@ts-ignore
      slides[i].style.display = "none";  
    }
    this.slideIndex++;
    if (this.slideIndex > slides.length) {this.slideIndex = 1}    
    //@ts-ignore
   slides[this.slideIndex-1].style.display = "block";
   },2000)
  }

这不起作用。

export class ... {
    slideIndex: number = 0;

    ngAfterViewInit() {
       this.startSlider();
      }

    startSlider(){
      var i;
      let slides = document.getElementsByClassName("xx");
      for (i = 0; i < slides.length; i++) {
        //@ts-ignore
        slides[i].style.display = "none";  
      }
      this.slideIndex++;
      if (this.slideIndex > slides.length) {this.slideIndex = 1}    
       //@ts-ignore
      slides[this.slideIndex-1].style.display = "block";
      setInterval(this.startSlider, 2000);
    }
    }

HTML

 <section class="lazy slider">
        <div class="xx">
          <h1>dsdsdds</h1>
          <figure><img src="theme/images/home01.jpg" width="509" alt="responsive websites" class="img-responsive"></figure>
        </div>
        <div class="xx">
          <h1>dsfdsfdsfdsf</h1>
          <figure><img src="theme/images/home02.jpg" width="509" alt="responsive websites" class="img-responsive"></figure>
        </div>
        <div class="xx">
          <h1>sfdfdsfdsfdsf.</h1>
          <figure><img src="theme/images/home03.jpg" width="509" alt="responsive websites" class="img-responsive"></figure>
        </div>
 </section>

Answer 1

问题在于此行：setInterval(this.startSlider, 2000);以这种方式调用setInterval时startSlider函数将获得一个新的作用域，这意味着this不再引用您的零件。您需要使用提供的方法上的bind函数来显式设置函数的上下文。更新到以下内容，它应该可以工作：

setInterval(this.startSlider.bind(this), 2000);

Answer 2

我真的不知道该说些什么，但是通常这根本不是角度。

您想要实现的目标就像

一样简单

// mySlider.component.ts
// ..
ngOnInit() {
  setInterval(() => this.update(), 2000); 
  // setInterval(this.update, 2000); won't work because you're passing the function body
}
update() {
  this.slideIndex++;
  if (this.slideIndex > slides.length) {
    this.slideIndex = 0;
  }
}

以html

<section class="lazy slider">
        <div class="xx" [style.display]="slideIndex === 0 ? 'block' : 'none'">
          <h1>dsdsdds</h1>
          <figure><img src="theme/images/home01.jpg" width="509" alt="responsive websites" class="img-responsive"></figure>
        </div>
        <div class="xx" [style.display]="slideIndex === 1 ? 'block' : 'none'">
          <h1>dsfdsfdsfdsf</h1>
          <figure><img src="theme/images/home02.jpg" width="509" alt="responsive websites" class="img-responsive"></figure>
        </div>
        <div class="xx" [style.display]="slideIndex === 2 ? 'block' : 'none'">
          <h1>sfdfdsfdsfdsf.</h1>
          <figure><img src="theme/images/home03.jpg" width="509" alt="responsive websites" class="img-responsive"></figure>
        </div>
 </section>

仍然不是倾斜的方式，您最好为幻灯片使用*ngFor，但至少它使用了最初打算解决的主要特征。

为什么此属性在函数内部不起作用？

2 个答案: