带连接线的 Angular Flex 盒子答案

【问题标题】：Angular Flex boxes with connecting line带连接线的 Angular Flex 盒子
【发布时间】：2020-10-07 04:11:26
【问题描述】：

我正在尝试创建几个带有文本的框和一条连接它们的线。我为每个盒子创建了一个类，如下所示：

.box {
  background: white;
  border: 1px solid black;
  color: black;
  border-radius: 8px;
  padding: 8px 20px;
  margin: 20px;
}

然后创建几个盒子我有这个：

<div fxLayout="row" fxLayoutAlign="space-between">
   <div class="box" *ngFor="let box of boxes" fxLayout="column" fxLayoutAlign="start center">
     <div>
       {{box.firstText}}
     </div>
     <div>
        {{box.secondText}}
     </div>
   </div>
</div>

我正在尝试添加一条连接每个框的水平线，因此我尝试在每个循环中的框末尾添加一个 <hr> 标记，如下所示：

<div fxLayout="row" fxLayoutAlign="space-between">
       <div class="box" *ngFor="let box of boxes" fxLayout="column" fxLayoutAlign="start center">
         <div>
           {{box.firstText}}
         </div>
         <div>
            {{box.secondText}}
         </div>
          <hr> //Addded here
       </div>
    </div>

但是这条线没有出现在任何地方

【问题讨论】：

标签： html css angular-flex-layout

【解决方案1】：

hr 没有显示在中间，因为它在列布局内，所以它被添加到 .box 内部的底部。

hr 应该是 row 结构的子结构，因为我们希望它在框旁边，但我们也希望它在每个框之间重复，所以它必须在 ngFor 中。我们可以使用 ng-container 来保存 for 循环（它在 dom 中是不可见的，所以 fxLayout 不会影响它）。

<div fxLayout="row" fxLayoutAlign="space-between center">
  <ng-container *ngFor="let box of boxes; let l=last">
    <div class="box" fxLayout="column" fxLayoutAlign="start center">
      <div>
        {{box.firstText}}
      </div>
      <div>
        {{box.secondText}}
      </div>
      <hr>
    </div>
    <hr fxFlex *ngIf="!l">
  </ng-container>
</div>

我还将 center 添加到fxLayoutAlign 以使hr 垂直居中。

在ngFor 中，我添加了; let l=last 以便能够使用ngIf 隐藏最后一个小时。

结果如下：

【讨论】：