javascript数组的增量和减量

Question

我正在尝试使用角度材料创建简单的图像模式。 next() 应该是从数组中查看下一张图片，prev() 是查看上一张图片。

问题 next 和 prev 函数没有按预期工作。如果单击 next() 索引只增加 +1 然后停止。如果我点击 prev() 索引变为-1

app.ts

  const imageArray = [
      {
        imageData: [
          'https://via.placeholder.com/50',
          'https://via.placeholder.com/60'
        ],
      },
      {
        imageData: [
          'https://via.placeholder.com/100'
        ],
      },
      {
        imageData: [
          'https://via.placeholder.com/150'
        ],
     }
  ];

  next() {
    this.currentImage = this.imageCollection[this.imageIndex + 1];
  }

  prev() {
    this.currentImage = this.imageCollection[this.imageIndex - 1];
  }

  processImage() {
    const rawData = this.imageArray;
    this.imageCollection = rawData.flatMap((el: any) => el.imageData);
    this.imageIndex = this.imageCollection.findIndex((x) => x === this.data.selectedImage);
    this.currentImage = this.imageCollection[this.imageIndex];
  }

app.html

<img [src]="currentImage"
     alt="customer document" />

<div (click)="next()">next</div>
<div (click)="prev()">previous</div>

Answer 1

单击后您没有设置this.imageIndex。 试试这个：

  next() {
    // if is last image, then go to first image
    if(this.imageIndex === this.imageCollection.length - 1) this.imageIndex = 0;
    else this.imageIndex++;

    this.currentImage = this.imageCollection[this.imageIndex];
  }

  prev() {
    // if is first image, then go to last image
    if(this.imageIndex === 0) this.imageIndex = this.imageCollection.length - 1;
    else this.imageIndex--;

    this.currentImage = this.imageCollection[this.imageIndex];
  }

Answer 2

问题是您实际上并没有增加/减少 this.imageIndex，而只是使用它的值，根据您的问题最初是 0。

像这样改变它：-

  next() {
    this.currentImage = this.imageCollection[++this.imageIndex];
  }

  prev() {
    this.currentImage = this.imageCollection[--this.imageIndex];
  }

当this.imageIndex 越界时添加检查。