单击时遍历数组并通过另一次单击更改专辑答案

【问题标题】：Iterate through an array on click and change albums via another click单击时遍历数组并通过另一次单击更改专辑
【发布时间】：2019-12-12 22:11:01
【问题描述】：

我有一个 ngFor 循环，它遍历一系列名人（见下文），这很好，但我现在想在图片库中添加，这是事情变得棘手的地方。每个人将有 2 个相册，相册将只是远程照片的 url 字符串-第一个问题是我希望能够单击图像标签（或附近的元素），并且每次单击时我都想要图像src 切换到下一个图像，理想情况下，当它到达终点时，我希望它再次回到起点或停止。

这已经够棘手了——但每个人都会有一个第二相册，它与第一个相册非常相似，即 Array 但是——当用户点击下方缩略图上的changeAlbum() 时，它会被激活——这个想法是未使用的数组的第一个图像（因为单击 changeAlbum() 使其处于非活动状态）填充此缩略图，然后画廊使用辅助画廊中的图像 - 所以本质上它就像两个画廊之间的复杂 toggle()单击即可遍历每个图库的数组 - 如果您遍历第一个图库时它会自动切换到第二个图库，反之亦然

我不完全确定如何处理它 - html 和 json 结构是我拥有的唯一可靠的东西。

    <div class="card" *ngFor="let c of item" >
        <div class="card-content">
            <div class="card-image">
                <img (click)="changePhoto()" [src]="{{ output image here from the click }}" />
            </div>
            <div class="card-titles">
                <h1>
                    {{ c.name }}
                </h1>
            </div>
            <div class="card-image">
                <img (click)="changeAlbum()" [src]="{{ show image from album not in use here}}" />
            </div>                            
        </div>
    </div>

我目前的数据结构是这样的

    item = [{
        id: 1,
        name: "Joe Jimbob",
        album_Main: [{
            selected: true,                
            "https://via.placeholder.com/250",
            "https://via.placeholder.com/250",
            "https://via.placeholder.com/250",
            "https://via.placeholder.com/250",                        
        }],
        album_Secondary: [{
            selected: false,
            "https://via.placeholder.com/250",
            "https://via.placeholder.com/250",
            "https://via.placeholder.com/250",
            "https://via.placeholder.com/250",                        
        }]    
    }]

这也是相对可靠的，但我非常愿意任何人提供任何帮助

    changeAlbum(item:any) :void {
      if( item.album_Main.selected ) {
        item.album_Main.selected == false
      } else {
        item.album_Secondary.selected == false      
      }
    }

还有变化……

    changePhoto(photos: Array<string>) :void {
      // not sure how to interate this one by one on click
      console.log( photos.length )
    }

【问题讨论】：

标签： javascript angular angular8

【解决方案1】：

查看我根据您的代码制作的 Stackblitz 示例：https://stackblitz.com/edit/angular-pk6cu8

重要的变化是 app.component.ts 中的这些

  photoIndex = 0;
  personIndex = 0;
  selectedAlbum = this.item[0].album_Main;
  altAlbum = this.item[0].album_Secondary;
  isMainAlbumActive = true;

  changePhoto() {
    if (this.photoIndex < this.selectedAlbum.length - 1) {
      this.photoIndex++;
    } else {
      this.photoIndex = 0;
    }
  }

  changeAlbum() {
    if (this.isMainAlbumActive) {
      this.selectedAlbum = this.item[this.personIndex].album_Secondary;
      this.altAlbum = this.item[this.personIndex].album_Main;
    } else {
      this.selectedAlbum = this.item[this.personIndex].album_Main;
      this.altAlbum = this.item[this.personIndex].album_Secondary;
    }
    this.isMainAlbumActive = !this.isMainAlbumActive;
  }

【讨论】：