Question

我遇到这种情况，其中有chronicles的数组，其中包含要在轮播滑块中显示的照片数组。单击箭头时，我希望滑块显示下一张照片。效果很好，但是所有滑块在单击时向右/向左移动，而只有我单击的那个滑块可以移动。我该怎么解决？

这是我的代码：

index = 0;
// if a current image is the same as requested image
isActive(index) {
  return this.index === index;
}

// show prev image
showPrev(photos: Photo[], chronicle: Chronicle, id: number) {
  if (photos[id].fkChronicle === chronicle.id) {
    id = (id > 0) ? --id : photos.length - 1;
  }
}

// show next image
showNext(photos: Photo[], chronicle: Chronicle, id: number) {
  if (photos[id].fkChronicle === chronicle.id) {
    this.index = (this.index < photos.length - 1) ? ++this.index : 0;
  }
}

// show a certain image
showPhoto(index) {
  this.index = index;
}

..

<div *ngIf="chronicles">
  <div *ngFor="let c of chronicles">
    {{c.title}} {{c.date | date: 'yyyy-MM-dd'}}
    <div class="container slider">
      {{!isActive(i)}}
      <!-- enumerate all photos -->
      <div *ngFor="let photo of c.photos; let i = index">
        <img class="slide materialboxed" (click)="showPhoto(i)" [hidden]="!isActive(i)" (change)="isActive(i)" src="../../../assets/chronicles/{{photo.title}}" />
        <!-- prev / next controls -->
        <a class="arrow prev" (click)="showPrev(c.photos, c, i)"><i class="material-icons">keyboard_arrow_left</i></a>
        <a class="arrow next" (click)="showNext(c.photos, c, i)"><i class="material-icons">navigate_next</i></a>
      </div>
    </div>
  </div>
</div>

我没有在线工作示例，但我以此为参考：https://codepen.io/leunicornsea/pen/oOOdpM（我将其重新设置为角度7）

触发数组中的特定元素，然后遍历其他数组

0 个答案: