Angular - 以两行显示按钮答案

【问题标题】：Angular - display buttons in rows of twoAngular - 以两行显示按钮
【发布时间】：2017-04-21 08:07:41
【问题描述】：

我正在尝试以两行显示动态创建的按钮，但我有点不确定该怎么做。到目前为止，我已经完成了以下工作，但它只适用于我有限的 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 来检查 index 是否为偶数，它会起作用，但某些元素不一定会显示，因为它们的布尔值可能会排除它们，这意味着 index 变量无论如何都会递增。有没有办法只检查正在呈现的按钮，如果是，我将如何处理？

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

【问题讨论】：

标签： html css angular

【解决方案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> 标记）来获得我想要的环绕效果。

【讨论】：

谢谢，我认为这将是最好的解决方案。 department.blnHiddenOnLandingPage 极不可能发生变化，我预计它不会在该产品的生命周期内发生。它只是在不太可能发生的情况下，某个部门因任何原因而被归档。我觉得很傻，因为在我最初的问题中，我忽略了 ngFor 循环遍历不一定显示的元素这一事实。

【解决方案2】：

在 Angular2 中，如果您使用引导程序，则可以这样做

<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 个列，然后应用 clear:both 来开始一个新行。

【讨论】：

【解决方案3】：

尝试使用模运算符。

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

这实质上每次 $index 是 2 倍时都会生成 BR。

【讨论】：

我用一些新信息更新了我的问题，因为我忽略了我的逻辑中的一个大错误。我没有考虑到 ngFor 也会循环遍历由于跨度上的此指令而未显示的元素：*ngIf="department.blnHiddenOnLandingPage == false"。我会稍等一下，看看是否有另一种解决方案，否则我将过滤数组以删除布尔值为 true 的任何元素，然后使用您的解决方案。

【解决方案4】：

您可以使用新的 FlexBox。 Tutorial

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

这会更高效，因为它是 css。

否则，您可以尝试使用模数：

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

【讨论】：

【解决方案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。

希望对你有帮助

【讨论】：