此代码在一张幻灯片上添加了 3 张图片。如何使用 *ngFor 获取动态数据?
<carousel>
<slide>
<img src="../../assets/wts1.png" alt="first slide" style="display: inline-block; width: 30%;padding-right: 10px">
<img src="../../assets/wts1.png" alt="second slide" style="display: inline-block; width: 30%;padding-right: 10px">
<img src="../../assets/wts1.png" alt="second slide" style="display: inline-block; width: 30%;padding-right: 10px">
</slide>
<slide>
<img src="../../assets/wts2.png" alt="second slide" style="display: inline-block; width: 30%;">
<img src="../../assets/wts2.png" alt="first slide" style="display: inline-block; width: 30%;">
<img src="../../assets/wts2.png" alt="second slide" style="display: inline-block; width: 30%;">
</slide>
<slide>
<img src="../../assets/wts3.png" alt="third slide" style="display: inline-block; width: 30%;">
<img src="../../assets/wts3.png" alt="first slide" style="display: inline-block; width: 30%;">
<img src="../../assets/wts4.png" alt="second slide" style="display: inline-block; width: 30%;">
</slide>
</carousel>
打字稿
imageGroups = this.yourImageArray.reduce((p, c, i) => {
if (i === 0 || i % 3 === 0) {
p.push([c]);
} else {
p[p.length - 1].push(c);
}
return p;
}, []);
HTML
<carousel>
<slide *ngFor="let group of imageGroups">
<img *ngFor="let image of group" [src]="'https://' + image.src" [alt]="image.description" style="display: inline-block; width: 30%;" />
</slide>
</carousel>
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句