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

开发者.PT

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

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如果我们在angular 4中使用* ngFor,如何在一个实例上触发函数

我有一个 number 类型的值,如何通过在 angular 中使用 ngFor 进行迭代来减少它的值?

如何从 angular6 使用 mapStateToProps?

在我的html(angular6)中的ngFor内调用方法

angular6:如何显示表格的值

如何在 Angular6 的 CSS 中使用内联 svg

使用Angular6在3个元素之间切换类

如何使用ngFor在Angular 9中一次只选择一个复选框

在Angular中使用ngFor进行循环时,只显示一次相同的多个值

使用 Angular6 将图像拖放到 div 中并显示预览

使用angular6从mongodb获取图像到网站

对angular6中的一个组件使用多路由

使用 Angular6 自动完成显示 id_product

使用angular6显示多个嵌套数据

Bootstrap轮播无法与angular6一起使用

如何抛出第一次进入触发动画angular6

angular6如何在另一个库中导入一个库?

在 angular 中,我们如何在 ngFor 循环中定义的 ngIf 中使用局部变量?

如何在angular6中使用打字稿获取当年

如何在angular6中使用Amcharts4?

如何在Angular6上的ngx-leaflet中使用colorFilter

Angular6项目中如何在createJS中使用sortChildren?

我们如何在 Angular 中一个接一个地显示表单错误验证

Angular6 / MD PWA与Ionic 3 + Angular 6 PWA

使用* ngIf的Angular6 AutoFocus

HTTP使用Angular6的get方法

* ngFor遍历数组Angular6的数组

以 angular6 上传 aws s3 存储桶图像有问题作为回报

如何在Angular6中压缩Base64 /二进制图像?