Проходить по списку и вставлять элементы HTML в зависимости от нечетного или четного в угловом

Question

Я новичок в Angular и пытаюсь понять, как пройтись по списку

Допустим, у меня есть список, подобный тому, который есть в руководстве по Tour of Heroes.https://angular.io/tutorial/toh-pt2

    export const HEROES: Hero[] = [
  { id: 11, name: 'Mr. Nice' },
  { id: 12, name: 'Narco' },
  { id: 13, name: 'Bombasto' },
  { id: 14, name: 'Celeritas' },
  { id: 15, name: 'Magneta' }      
];

Я использую Bulma для стиля и хотел бы вставить список героев в столбцы с двумя столбцами pr строки.https://bulma.io/documentation/columns/basics/

Конечный результат выглядит примерно так:

     <div class="container">
          <div class="columns">
             <div class="column">
                11 Mr. Nice
             </div>
            <div class="column">
                12 Narco
            </div>
          </div>
          <div class="columns">
             <div class="column">
                13 Bombasto
             </div>
            <div class="column">
                14 Celeritas
            </div>
          </div>
          <div class="columns">
             <div class="column">
                15 Magneta
             </div>
            <div class="column">
            </div>
          </div>
        </div>

Существует некоторая документация по таким значениям, как first, last, even & odd https://angular.io/api/common/NgForOf

НоЯ не могу понять, как их использовать.Потому что, если элемент i Odd , тогда мне нужно было бы добавить начальный элемент <div class="columns">, а если его Even , мне нужно было бы добавить закрывающий элемент и, конечно, особый случай, когдасписок содержит и нечетные номера элементов, тогда мне придется добавить пустой <div class="column"></div>

Answer 1

Это также можно сделать с помощью first, last, even & odd, но оптимальный способ - это реализовать свои HTML-теги, чтобы вы могли использовать * ngFor whitout first, last, even & odd.

решение: Из-за файловой структуры, упомянутой выше, я предлагаю вам разделить массив на компонент.

попробовать:

export const HEROES: Hero[] = [
 { id: 11, name: 'Mr. Nice' },
 { id: 12, name: 'Narco' },
 { id: 13, name: 'Bombasto' },
 { id: 14, name: 'Celeritas' },
 { id: 15, name: 'Magneta' }      
];
HEROES = chunkArray(HEROES, 2);

function chunkArray(array, chunkSize) {
    return Array(Math.ceil(array.length / chunk_size)).fill().map((_, index) 
           => index * chunk_size).map(begin => array.slice(begin, begin + 
           chunk_size))
}

теперь ГЕРОИ это:

[
 [{"id":11,"name":"Mr. Nice"},{"id":12,"name":"Narco"}], 
 [{"id":13,"name":"Bombasto"},{"id":14,"name":"Celeritas"}], 
 [{"id":15,"name":"Magneta"}]
]

попробуйте в html: