Question

我有一个像

这样的简单表格

<table class="table table-bordered table-condensed table-hover table-striped ">
<thead>
    <tr>
        <th>Benutzer</th>
        <th>Vorname</th>
        <th>Nachname</th>
    </tr>
</thead>
<tbody>
  <tr *ngFor="let empl of employers">
        <td>{{empl.name}}</td>
        <td>{{empl.firstName}}</td>
        <td>{{empl.lastName}}</td>
  </tr>
</tbody>
</table>

显示数据。在首次显示时，我使用employers获取Promise的数据，这需要相当长的时间。显示屏可以很好地处理空数据。

当我用

之类的东西封装整个表时，我的问题开始了

<div class="panel-heading">{{title}}</div>
<div class="panel-body">
  .... table ....
</div>

这会在表格周围绘制边框 - 只要不包含数据就可以。但是当我的数据具有 loooooooooooooooong 内容时，表格会延伸 - 并且不会重绘/刷新边框。

如何在 panel-body完成后再次>评估*ngFor的边框？

Answer 1

问题更多的是CSS而不是Angular。如果在具有固定宽度的DIV元素中有一个长TABLE元素，则表将溢出div（变宽）。

要绕过它，您可以设置＆＃34;溢出：自动＆＃34;在div上或限制表格单元格的长度（通过设置＆＃34; table-layout：fixed＆＃34 ;,设置其宽度并将其单元格的内容包装在DIV中，溢出：隐藏）。或者您可以使用一些响应结构而不是TABLE。如flex布局。

Angular2：检索数据后更新表视图

1 个答案: