Html 如何在Angular应用程序中跨多行显示数组项

在我的Angular应用程序中，我的.ts文件中有一系列公司，它们在我的HTML中使用ngFor显示，代码如下：

<div class="card-deck">
  <div class="card" *ngFor="let company of companies">
      <div class="card-body">
         <h5 class="card-title">         
             {{ company.companyName }}
          </h5>
       </div>
  </div>
</div>

{{company.companyName}

上面的卡片组在一行中显示整个公司列表

例如，如果有3家公司，则它们在屏幕上显示为一行。如果有10家公司，它们将显示在一行中

有人能告诉我需要对TS或HTML进行哪些更改，以便我可以设置每行的公司数吗？即，一行最多只能显示3家公司，然后移到下一行

---

提前非常感谢。

作为一种可能的解决方案，您可以从

公司创建多维数组，并使用两个
*ngFor
（迭代行，然后迭代
公司
）

//component.ts
公司=[{
公司名称：“第一”
},
{
公司名称：“第二”
},
{
公司名称：“第三”
}
...
]//例如，公司中的十个要素
公司名称：编号=3；//世界其他地区的公司数量
排；
恩戈尼尼特（）{
//创建多维数组
this.rows=this.companys.reduce（（acc，value，index）=>{
如果（索引%this.companysinrow==0&&index！==0）acc.push（[]）
acc[acc.length-1]。推送（值）
返回acc；
}, [[]]);
}
//component.html
{{company.companyName}

检查一个简单的方法就是在你的卡片
div
中添加一些
style
，比如：

<div class="card-deck">
  <div class="card" *ngFor="let company of companies" style="width:33%; display: inline-block; text-align: center">
      <div class="card-body">
         <h5 class="card-title">         
             {{ company.companyName }}
          </h5>
       </div>
  </div>
</div>


{{company.companyName}


<div class="card-deck">
  <div class="card" *ngFor="let company of companies" style="width:33%; display: inline-block; text-align: center">
      <div class="card-body">
         <h5 class="card-title">         
             {{ company.companyName }}
          </h5>
       </div>
  </div>
</div>