通过数组迭代更新 ngIf。制作简单的幻灯片

Question

我正在尝试创建自己的图像幻灯片并开始使用数组。我不确定如何解决这个问题，所以我在每个要显示和隐藏的元素中设置 ngIf，在 class 中为每个元素设置值，然后将它们拉入数组。

我认为那是我要出错的地方，但我没有看到。我可以获得 slideShow 函数，通过每次迭代将每个 Array 元素更新为 True，但我不确定要做什么 return。我想我错过了一些非常简单的东西，但我不确定是什么。

这是 stackblitz 已更新答案 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];
      }
    }
  }

Answer 1

将 slideArray 定义为组件 class 属性

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

然后在timeout函数中：

将所有 slideArray 替换为 this.slideArray

调用timeout(images);时，按timeout.call(this, images);

调用

完成上述所有操作后，slideArray 将成为 return 值并在组件 html 文件

中可用

通过数组迭代更新 ngIf。制作简单的幻灯片

Updating ngIf through array iteration. Making a simple slide show

arrays

angular-ng-if

angular

two-way-binding