循环遍历列表并根据 Angular 中的奇数或偶数插入 html 个元素

Question

我是 Angular 的新手，我正在尝试了解如何遍历列表

假设我有一个类似于英雄之旅教程中的列表。 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

但我不知道如何使用它们。因为如果元素 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:

循环遍历列表并根据 Angular 中的奇数或偶数插入 html 个元素

Loop through a list and insert html elements depending on Odd or Even in Angular

html

angular

bulma