在Angular Swiper中獲取圖像和標題

我使用Swiper（https://www.npmjs.com/package/angular2-useful-swiper）顯示圖像和標題的圖庫。在Angular 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>

來源

2017-08-08 bluebrooklynbrim

如果我的解決方案爲您工作，然後將其設置爲接受。 – Faisal

刪除您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

來源

2017-08-08 14:34:17 Faisal

在Angular Swiper中獲取圖像和標題

回答

相關問題