遍历类 Angular4 的数组

Question

我目前正在使用 Swiper (https://www.npmjs.com/package/angular2-useful-swiper) 创建图片库。

是否可以通过遍历对象数组并使用 ngClass 来动态更改 div 的 class？我不确定它是否支持插值。

我不断收到的错误是“标识符 'style' 未定义。'Array' 不包含此类成员。”但为什么 ngStyle、h4 和 p 能够抓取元素并在这种情况下对其进行迭代？

slider.component.html

<div class="swiper-container">
  <swiper class="swiper" [config]="config">
    <div class="swiper-wrapper">
        <div class="swiper-slide" *ngFor="let image of images">
            <div class="swiper-slide--container">
              <div class="symptom-slide-img"
              [ngClass]="images.style" [ngStyle]="{'background-image': 'url(' + image.src + ')'}"></div>
              <div class="caption">
                  <h4>{{ image.title }}</h4>
                  <p>{{ image.caption}}</p>
              </div>
            </div>

      </div>
    </div>
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
  </swiper>
</div>

slider.component.ts

import { Component, OnInit } from '@angular/core';
import { NgClass } from '@angular/common';

@Component({
  selector: 'app-symptoms-slider',
  templateUrl: './symptoms-slider.component.html',
  styleUrls: ['./symptoms-slider.component.scss']
})
export class SymptomsSliderComponent implements OnInit {

images = [  {
                'src': './path/image.png',
                'title': 'Title',
                'style': 'hvr-pulse-grow',
                'caption':
                'Caption'
            },
            {
                'src': './path/image.png',
                'title': 'Title',
                'style': 'hvr-buzz',
                'caption':
                'Caption'
            },
            {
                'src': './path/image.png',
                'title': 'Title',
                'style': 'hvr-wobble-vertical',
                'caption':
                'Caption'
            },
            {
                'src': './path/image.png',
                'title': 'Title',
                'style': 'hvr-wobble-vertical',
                'caption':
                'Caption'
            },
        ];

  constructor() { }

  ngOnInit() {
  }
}

Answer 1

打字错误

[ngClass]="images. 到 [ngClass]="image.（删除不必要的 's'）

遍历类 Angular4 的数组

Iterate through array of classes Angular4

javascript

css

swiper

angular

遍历 类 Angular4 的数组

Iterate through array of classes Angular4

javascript

css

swiper

angular

遍历类 Angular4 的数组