angular - 我们如何使用 *ngFor 在 angular6 中进行迭代以在 angular6 中一次显示 3 张图像

Question

此代码在一张幻灯片上添加了 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>

标签： angularhtmlcssangular-materialcarousel

Answer 1

打字稿

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>

在这里演示