循环遍历Angular2中的html标记

时间:2016-03-05 11:19:46

标签: angular

我想用Angular2构建一个包含48行的表,我想用ngFor来做。现在我通过一个数组(大小48)来做到这一点,但我认为它效率很低而且不是一个好的编程风格。 在Angular2中有一种优雅的方式来做html标签的循环吗?我可以设置开始和结束的常态吗?

在组件中我有这个数组:

private rows = new Array(48);

HTML看起来像这样:

<table border="1">
  <tr *ngFor="#row of rows ; #i = index">
    <td>{{i}}</td>
   </tr>
 </table>

2 个答案:

答案 0 :(得分:0)

如上所述,评论提问者希望在HTML中使用*ngFor,但要定义一些起点和终点。所以* ngFor作为官员并不存在完全相同的属性但是我们可以用这个技巧做同样的事情。我假设一个演示示例根据您的需要修改它。

<ul>
  <div *ngFor="#a of abc">
  <li *ngIf='a<6'>
    <span >{{a}}</span>
  </li>
  </div>
</ul>

abc = [1,2,3,4,5,6,7,8,9];

因此,我们可以绑定起点和终点。

工作plunkr example.

答案 1 :(得分:-1)

不,只有ngFor。在一个循环中构建HTML并不直接依赖于为其构建行的任何具体数据,这是非常不寻常的恕我直言。