我们如何使用 *ngFor 在角度 6 中进行迭代以在角度 6 中一次显示 3 个图像答案

【问题标题】：How can we use *ngFor for iteration in angular6 to show 3 images at a time in angular6我们如何使用 *ngFor 在角度 6 中进行迭代以在角度 6 中一次显示 3 个图像
【发布时间】：2019-04-23 02:44:04
【问题描述】：

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

【问题讨论】：

标签： angular html css angular-material carousel

【解决方案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>

Demo Here

【讨论】：

我建议使用类而不是内联样式
谢谢你..它正在工作
你好 BinaryPatrick，我们可以在点击轮播中的下一个按钮时向左移动图像吗？例如，现在在一个插槽中显示 3 个图像。如果我单击下一个按钮，则会显示另外 3 个或更少的图像。如果我想在第一个插槽中显示 3 张图像，然后单击下一个按钮需要显示图像向左移动并且需要显示下一个图像。我们可以这样做吗？？

【解决方案2】：

Angular 不提供直接在模板中对元素进行分组的功能。实现结果的最简洁方法是使用chunk function from lodash（或类似的东西）创建一个具有指定长度的数组数组并循环遍历“外部”数组。

【讨论】：