在 Angular Swiper 中获取图像和标题

Question

我正在使用 Swiper (https://www.npmjs.com/package/angular2-useful-swiper) 来显示图像和说明的画廊。

此包演示中的代码仅遍历图像 url 数组。我尝试通过添加一段图片说明来进行修改。

我想遍历 2 个数组（一个是图像链接数组，另一个是相应图像的标题数组。）我觉得这段代码几乎可以工作，它确实遍历了两个数组, 但它打印了 3 次，而不是作为滑块...

如果有一种方法可以遍历 objects 的数组（我尝试过，但我也被困住了...）

是否还有一种方法可以遍历类数组并将它们分配给每个 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 变量。

Change your images array to following:

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'
            }
        ];

Then change your html to following:

<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

在 Angular Swiper 中获取图像和标题

Get image and caption in Angular Swiper

javascript

angular

swiper