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

删除Intent activivtyIntent = new Intent(context, MainMenuActivity.class); Intent.FLAG_ACTIVITY_BROUGHT_TO_FRONT |Intent.FLAG_ACTIVITY_REORDER_TO_FRONT |Intent.FLAG_ACTIVITY_NEW_TASK context.startActivity(activivtyIntent);变量。

将图像数组更改为以下内容：

passes

然后将您的html更改为以下内容：

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

以下是演示：PLUNKER DEMO

在Angular Swiper中获取图像和标题

1 个答案: