Как мы можем использовать * ngFor для итерации в angular6, чтобы показать 3 изображения одновременно в angular6 - PullRequest
Новая
       12

Как мы можем использовать * ngFor для итерации в angular6, чтобы показать 3 изображения одновременно в angular6

0 голосов
/ 22 апреля 2019

Этот код добавил 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>

Ответы [ 2 ]

1 голос
/ 22 апреля 2019

Машинопись 

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>

Демо здесь

0 голосов
/ 22 апреля 2019

Angular не предоставляет функциональные возможности для группировки элементов непосредственно в шаблоне. Самый простой способ добиться результата - использовать функцию чанка из lodash (или чего-то подобного), чтобы создать массив массивов указанной длины и пройти через «внешний» массив.

...