我目前正在使用 Swiper ( https://www.npmjs.com/package/angular2-useful-swiper ) 创建图片库。
是否可以通过遍历对象数组并使用 ngClass 来动态更改 div 的类?我不确定它是否支持插值。
我不断收到的错误是“未定义标识符‘style’。‘Array’不包含这样的成员。”但是,如果是这种情况,为什么 ngStyle、h4 和 p 能够获取元素并对其进行迭代?
slider .组件.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 组件.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() {
}
}
最佳答案
打字错误
[ngClass]="images.
到 [ngClass]="image.
(删除不必要的's')
关于javascript - 遍历类数组Angular4,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45590643/