#html #angular #bulma
#HTML #angular #bulma
Вопрос:
Я новичок в 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>
Ответ №1:
Это 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: