Блог

Проблема в slideIndex, внутри функции я проверил это с помощью alert. Сначала его значение равно 0, затем оно не определено, а после этого this.slideIndex ; вычисляется как NaN. Почему это происходит, каков обходной путь. Предполагается, что изображение переключается каждые 2 секунды. Сначала отображается изображение, а через 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>
  

Проблема в этой строке: setInterval(this.startSlider, 2000); когда вы вызываете setInterval таким образом, startSlider функция получает новую область видимости, что означает, что this она больше не ссылается на ваш компонент. Вам нужно явно задать контекст функции, используя bind функцию в предоставленном методе. Обновите до следующего, и оно должно работать:

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

Я действительно не знаю, о чем говорить в первую очередь, но, как правило, это совсем не angular way.

то, чего вы пытаетесь достичь, так просто, как

 // 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 для слайдов, но, по крайней мере, он использует основную функцию, которую изначально намеревался решить angular.