Angular 2 ng For table creation

时间:2017-09-20 09:29:18

标签: angular

如何使用非固定列数创建角度为2的表格,或者使用循环根据此循环的数量创建列数。

2 个答案:

答案 0 :(得分:2)

您需要在模板上使用* ngFor循环。

{% if detail_page.has_other_pages %}
  <ul class="pagination">
    {% if detail_page.has_previous %}
      <li><a href="?page={{ detail_page.previous_page_number }}">&laquo;</a></li>
    {% else %}
      <li class="disabled"><span>&laquo;</span></li>
    {% endif %}
    {% for i in detail_page.paginator.page_range %}
      {% if detail_page.number == i %}
        <li class="active"><span>{{ i }} <span class="sr-only">(current)</span></span></li>
      {% else %}
        <li><a href="?page={{ i }}">{{ i }}</a></li>
      {% endif %}
    {% endfor %}
    {% if detail_page.has_next %}
      <li><a href="?page={{ detail_page.next_page_number }}">&raquo;</a></li>
    {% else %}
      <li class="disabled"><span>&raquo;</span></li>
    {% endif %}
  </ul>
{% endif %}

这是一个小例子,你必须将它放在你的数据结构上

答案 1 :(得分:1)

以下是您需要的基本html:

<table>
    <thead>
        <tr>
            <td *ngFor="let column of tableColumns">Content</td>
        </tr>
    </thead>
</table>

*ngFor基于数组长度工作,所以在组件中你可以创建一个空数组并指定它的长度,如下所示:

this.tableColumns = new Array(5);

这是有5列的工作plunker:https://plnkr.co/edit/Cx8CssdO3V63dzQH7HSL?p=preview