Angular如何围绕循环包装class =“row”

Question

<li *ngFor="let category of categories; let i = index">
   <a href="{{ '/' + (category[0] | lowercase) + '-invitations/invite/all-cards' }}">{{ category[0] }}</a>
</li>

必需的输出：

<div class="row">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
</div>
<div class="row">
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
</div>
<div class="row">
  <li>9</li>
  <li>10</li>
  <li>3</li>
  <li>4</li>
</div>

有任何帮助吗？ 请有人看看 请有人看看 请有人看看

Answer 1

对您的类别进行分组并对该组进行迭代。

//In your component.ts create a "getter"

get groupCategories(){
   let groupCategories:any[]=[];
   let j=-1;
   for (let i=0;i<this.categories.length;i++)
   {
       if ((i%4)==0)
       {
         groupCategories.push([]);
         j++;
       }
       groupCategories[j].push(this.categories[i]);
   }
   console.log(groupCategories);
   return groupCategories;
}