Angular Swiperで画像とキャプションを取得

Question

私はSwiper（https://www.npmjs.com/package/angular2-useful-swiper）を使って画像とキャプションのギャラリーを表示しています。

このパッケージのデモのコードは、画像URLの配列を通してのみ繰り返します。画像キャプションの段落を追加して修正しようとしました。

2つの配列（画像へのリンクの配列、対応する画像のキャプションの配列）を繰り返していきたいと思っています。このコードがうまく動作し、両方の配列を繰り返し処理し、そこにオブジェクトの配列を反復処理するための方法なら、それは

（私が試した何かが、私はあまりにもそれで捕まってしまった...）

...スライダーとして3回を出力し、そしてませんクラスの配列を反復して各divに割り当てる方法もありますか？

slider.component.ts

import { Component, OnInit } from '@angular/core'; 
@Component({ 
    selector: 'app-symptoms-slider', 
    templateUrl: './symptoms-slider.component.html', 
    styleUrls: ['./symptoms-slider.component.scss'] 
}) 
export class SymptomsSliderComponent implements OnInit { 
    variants = [ 
    'hvr-pulse-grow', 
    'hvr-buzz', 
    'hvr-wobble-vertical', 
    ]; 

    passes = [ 
     'Caption 1', 
     'Caption 2', 
     'Caption 3', 
     'Caption 4', 
     'Caption 5', 
     'Caption 6', 
    ]; 
    slides: Slide[]; 
    images = [ 
      '../assets/images/swiper-symptoms/fatigue.png', 
      '../assets/images/swiper-symptoms/craving.png', 
      '../assets/images/swiper-symptoms/chewing.png', 
      '../assets/images/swiper-symptoms/restless.png', 
      '../assets/images/swiper-symptoms/cold.png' 
     ]; 
     config: Object = { 
       pagination: '.swiper-pagination', 
       paginationClickable: true, 
       nextButton: '.swiper-button-next', 
       prevButton: '.swiper-button-prev', 
       slidesPerView: 4, 
       spaceBetween: 30, 
       loop: true, 
       breakpoints: { 
       // when window width is <= 320px 
       767: { 
        slidesPerView: 3, 
        spaceBetween: 10 
       } 
       } 
      }; 
    constructor() { } 
    ngOnInit() { 
    } 
} 

slider.component.html

<swiper class="swiper" [config]="config"> 
    <div class="swiper-wrapper test"> 
    <div class="swiper-slide"> 
     <img [ngClass]="variants" *ngFor="let image of images" [src]="image"> 
     <div class="caption"><p *ngFor="let pass of passes">{{pass}}</p></div> 
    </div> 
    </div> 
    <div class="swiper-button-next"></div> 
    <div class="swiper-button-prev"></div> 
</swiper> 

Answer 1

はあなたのpasses変数を削除します。

を次のようにあなたのイメージの配列を変更し

：

images = [ { 
       'src':'../assets/images/swiper-symptoms/fatigue.png', 
       'caption':'Caption 1' 
      }, 
      { 
       'src':'../assets/images/swiper-symptoms/craving.png', 
       'caption':'Caption 2' 
      }, 
      { 
       'src':'../assets/images/swiper-symptoms/chewing.png', 
       'caption':'Caption 3' 
      }, 
      { 
       'src':'../assets/images/swiper-symptoms/restless.png', 
       'caption':'Caption 4' 
      }, 
      { 
       'src':'../assets/images/swiper-symptoms/cold.png', 
       'caption':'Caption 5' 
      } 
     ]; 

その後、次へのあなたのHTMLを変更します。

<swiper class="swiper" [config]="config"> 
    <div class="swiper-wrapper test"> 
     <div class="swiper-slide" *ngFor="let image of images"> 
      <img [ngClass]="variants" [src]="image.src"> 
      <div class="caption"> 
       <p>{{image.caption}}</p> 
      </div> 
    </div> 
    </div> 
    <div class="swiper-button-next"></div> 
    <div class="swiper-button-prev"></div> 
</swiper> 

---

をここでデモです：PLUNKER DEMO