时间戳

首页 > 解决方案 > 如何将结果以 3 个为一组放置角度分量

angular - 如何将结果以 3 个为一组放置角度分量

问题描述

所以我有一个对象数组，例如返回 9 个对象。在 html 中，我想以每行 3 个网格显示结果。就像是

  <li *ngFor="how to put a loop here ? let hero of heroes">
    <div class="row">
   <div>{{ heroes[0] }}<div> <div>{{ heroes[1] }}<div> <div>{{ heroes[2] }}<div>
    </div>
   <div class="row">
    <div>{{ heroes[3] }}<div> <div>{{ heroes[4] }}<div> <div>{{ heroes[5] }}<div>
    </div>
   <div class="row">
    <div>{{ heroes[6] }}<div> <div>{{ heroes[7] }}<div> <div>{{ heroes[8] }}<div>
    </div>
 </li>

我怎么能放这样一个 *ngFor ？它不是一个固定长度的数组。

标签： angulartypescript

解决方案

这个解决方案对我很好。您可以将新英雄数组保存在 _hereos 等变量中，并在 ngFor 中使用它。您可以在此处查看此代码。

  heroes = [2,3,6,7,8,8];

  createHeroesArray() {
    const arr = [];

    for(let i = 0 , len = this.heroes.length; i < len ; i += 3) {
      arr.push([this.heroes[i],this.heroes[i + 1], this.heroes[i + 2]])
    }

    return arr;
  }

<li *ngFor="let heroe of createHeroesArray();">
    <div class="row">
        <div>{{ heroe[0] }}</div> 
        <div>{{ heroe[1] }}</div>
        <div>{{ heroe[2] }}</div>
    </div>
 </li>

推荐阅读