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

【问题标题】：Angular2: update table view after retrieving dataAngular2：检索数据后更新表视图
【发布时间】：2017-03-30 21:56:11
【问题描述】：

我有一个简单的表格

<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>

显示数据。当它首次显示时，我使用Promise 获取employers 的数据，这需要相当长的时间。显示对于空数据效果很好。

当我用类似的东西封装整个表格时，我的问题就开始了

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

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

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

【问题讨论】：

您可以使用*ngIf="employers" 帮助您在条件为真时加载区域
我认为了解表格和面板主体具有哪些 CSS 属性（主要是“显示”和“溢出”）很重要。表格显示数据后是否溢出panel-body元素？
@JánHalaša：对您的问题：是的，表格在显示后超出了面板主体大小。以及当没有足够的空间并且我缩小窗口时，边框比表格本身缩小得多。

标签： angular html-table

【解决方案1】：

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

要绕过它，您可以在 div 上设置“溢出：自动”或限制表格单元格的长度（通过设置“表格布局：固定”，设置其宽度并在 DIV 中包装其单元格的内容溢出：隐藏）。或者您可以使用一些响应式结构而不是 TABLE。比如弹性布局。

【讨论】：

谢谢！ style="overflow: auto" 解决了这个问题！