Блог

Я новичок в 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>
 

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

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

Это first, last, even amp; odd тоже можно сделать, но оптимальный способ — иметь возможность реализовать ваши html-теги, чтобы вы могли использовать *ngFor whitout first, last, even amp; 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))
}
 

теперь HEROES:

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

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