Обновление ngIf через итерацию массива. Создание простого слайд-шоу - PullRequest
Новая
       33

Обновление ngIf через итерацию массива. Создание простого слайд-шоу

1 голос
/ 02 марта 2020

Я играл с созданием собственного слайд-шоу с изображениями и начал играть с массивами. Я не был уверен, как решить эту проблему, поэтому я установил ngIf в каждом элементе, который я хотел показать и скрыть, установил значения в классе для каждого, а затем вытащил их в массив.

Я думаю, что здесь я ошибаюсь, но я этого не вижу. Я могу заставить функцию slideShow обновлять каждый элемент Array до True на каждой итерации, но я не уверен, что возвращать. Я думаю, что упускаю что-то действительно простое, но я не уверен, что.

Вот блик стека ОБНОВЛЕНО ОТВЕТОМ https://stackblitz.com/edit/angular-9ydflj

  import { Component, OnInit } from '@angular/core';

  @Component({
    selector: 'my-app',
    templateUrl: './app.component.html',
    styleUrls: [ './app.component.css' ]
  })
  export class AppComponent implements OnInit {
    slider1 = true;
    slider2 = false;
    slider3 = false;
    slider4 = false;

    constructor() {}

    ngOnInit() {
      this.slideShow();
    }
    slideShow() {
      const time = 2000;
      const slideArray = [this.slider1, this.slider2, this.slider3, this.slider4];

      for (const images in slideArray) {
        if (images) {
          timeout(images);
        }
      }
      function timeout(images) {
        window.setTimeout(() => {
          slideArray[images - 1] = false;
          slideArray[images] = true;
          console.log(slideArray[images], images, slideArray);
        }, time * images);
        return slideArray[images];
      }
    }
  }

1 Ответ

1 голос
/ 02 марта 2020

Определить slideArray как свойство класса компонента 

// probably just above constructor
slideArray = [this.slider1, this.slider2, this.slider3, this.slider4];

Затем в timeout функция:

заменить все slideArray на this.slideArray

Когда вы звоните timeout(images);, сделайте это как timeout.call(this, images);

После того, как вы закончите sh все выше, slideArray будет возвращаемым значением и будет доступно в компоненте html файл

...