Question

我试图以两行的形式显示动态创建的按钮，我不知道该怎么做。到目前为止，我已经完成了以下工作，但它仅适用于我有限的4个按钮。我想要的是它在每隔一个按钮后插入一个换行符。这是我的代码：

HTML：

<div id="departmentButtonsDiv" *ngFor="let department of lstDepartments; let i 
= index">
   <span *ngIf="department.blnHiddenOnLandingPage == false">
     <button pButton type="button" class="departmentButton" 
           (click)="navigateToDepartment(department.strName)" label=
           {{department.strName}}></button>
   </span>
  <br *ngIf=" i == 3">
</div>

CSS：

.departmentButton {
 height: auto;
 width: 200px;
 margin-bottom: 2px;
}

#departmentButtonsDiv{
 position: relative;
 top: 10%;
 left: 45%;
 display: inline;
}

我最初认为如果我设置ngIf来检查索引是否为偶数，它就可以解决问题，但是某些元素不一定会显示，因为它们的布尔值可能会排除它们，这意味着索引变量无论如何都会增加。有没有办法只检查正在渲染的按钮，如果有的话，我该如何处理呢？

我不是一个真正的前端开发人员，所以我的HTML / CSS有点不确定，而且我只在Angular工作了大约一个月，所以我在这方面很缺乏经验太。在这方面，我将不胜感激任何帮助或建议。我甚至愿意接受更好的方法，因为我确信这只是众多方法中的一种。

Answer 1

价值department.blnHiddenOnLandingPage的动态程度如何？如果它不是经常变化的，那么另一种方法可以简单地过滤组件中的部门列表，这样您就没有足够的逻辑来处理模板。

因此，例如，您可以让组件执行以下操作：

ngOnInit() {
  .....
  this.filteredDepartments = this.lstDepartments.filter(dept => !dept. blnHiddenOnLandingPage);
}

然后，在你的模板中：

 <div id="departmentButtonsDiv" *ngFor="let department of filteredDepartments; let i=index">
   <span>
     <button pButton type="button" class="departmentButton" 
          (click)="navigateToDepartment(department.strName)" label=
          {{department.strName}}></button>
   </span>
   <br *ngIf="i % 2 == 0">
</div>

如果hiddenOnLandingPage标志经常更改，您甚至可以将应用过滤器的位置移动到更合适的位置。 （例如，将过滤后的列表作为类的方法的返回值，以便它响应变化检测）

虽然根据更改的频率，我可能会采取不同的方法，并尝试使用css（而不是<br>标签）来获得我想要的包装效果。

Answer 2

在Angular2中，如果你使用bootstrap，你可以这样做

<div *ngFor="let item of list; let i = index">
    <div class="col-md-6"><button type="button">Click me !</button></div>
    <div class="clearfix" *ngIf="(i+1)%2 == 0"></div>
</div>

它基本上会附加2个cols，然后应用clear：两者都可以开始一个新行。

Answer 3

尝试使用模数运算符。

<br ng-if="$index % 2 == 0">

每当 $ index 为2时，这基本上会产生BR。

Answer 4

您可以使用新的FlexBox。 Tutorial

#departmentButtonsDiv {
  display: flex;
  flex-wrap: wrap;
  width: 200px;
}
#departmentButtonsDiv span {
  flex: 1 0 50%;
  box-sizing: border-box;
}

这将是更高效的，因为它是css。

否则你可以尝试使用modulo：

<br *ngIf="i % 2 == 0"/>

Answer 5

首先，检查偶数或奇数的方法是错误的

 <br *ngIf=" i == 3">

应该是这样的

甚至

<div *ngIf="id%2 == 0">

对于奇数

<div *ngIf="id%2 == 1">

要为每个偶数按钮插入一个中断，请尝试此

 <div *ngIf="department.blnHiddenOnLandingPage == false">
     <span>
         <button pButton type="button" class="departmentButton" 
               (click)="navigateToDepartment(department.strName)" label=
               {{department.strName}}></button>
       </span>
         <div *ngIf="id%2 == 0">
  </div>

我将*ngIf从span移到另一个div，以便在有按钮的情况下插入br。

希望这有帮助

角度 - 以两行

5 个答案: