首页 > 解决方案 > 如何使用 *ngFor 实现角度网格系统

问题描述

如何使用 ngFor 在 Angular5 中实现以下提到的结果

假设我在 Angular5 组件中定义了一个数组。如何显示数组,如下所示。

<div class='row'>
 <div class='col-3'>1</div>
<div class='col-3'>2</div>
<div class='col-3'>3</div>
<div class='col-3'>4</div>
</div>
<div class='row'>
 <div class='col-3'>5</div>
<div class='col-3'>6</div>
<div class='col-3'>7</div>
<div class='col-3'>8</div>
</div>
<div class='row'>
 <div class='col-3'>9</div>
<div class='col-3'>10</div>
<div class='col-3'>11</div>
<div class='col-3'>12</div>
</div>

我想使用 angular5 ngFor。假设值是从 rest api 获取的。对不起语法。

标签: htmlangularangular5ngfor

解决方案


<ng-container let obj of objs><div class='row'>
 <div class='col-3'>{{obj.i}}</div>
<div class='col-3'>{{obj.i}}</div>
<div class='col-3'>{{obj.i}}</div>
<div class='col-3'>{{obj.i}}</div>
</div></ng-container>

推荐阅读