html - Angular *ngFor 生成表 4 单元格宽

Question

我在组件文件中有一个数组，它将根据数据库查询动态更新。我需要这个数组来填充这样的表的内容：

对于 7 个项目的数组：

---------------------------------------------
| array[0] | array[1] | array[2] | array[3] |
---------------------------------------------
| array[4] | array[5] | array[6] |
----------------------------------

到目前为止我有这个方法：

HTML：

<table>
    <ng-container *ngFor="let employer of businessAdmins">
        <tr>
            <div class="card shadow m-2" style="height:25vh;width:18.75vh;border-radius:5%;overflow:hidden;">                
                <div class="ml-1"><div style="font-weight:bold">Name: </div>{{employer.data().first_name + " " + employer.data().last_name}}</div>                    
            </div>
        </tr>
    </ng-container>
</table>

这在生成单元格列表时效果很好，但是我不知道如何水平填充它们，直到有 4 个水平单元格然后移动到下一行。

标签： htmlcssangulartypescript

Answer 1

使用 CSS flex box 非常简单。试试这个代码 -

HTML

<div class="table">
  <ng-container *ngFor="let employer of businessAdmins">
    <div class="card shadow">
        <div style="font-weight:bold">
          Name: {{employer.data().first_name + " " + employer.data().last_name}}
        </div>
    </div>
  </ng-container>
</div>

CSS

.table {
  display: flex;
  flex-wrap: wrap;
  width: 100%;

  .card {
    flex: 1 0 25%;
  }
}

结果-