角度 - 两个行中的显示按钮

我试图在两行中显示动态创建的按钮，我有点不确定如何去做。到目前为止，我有以下工作，但它只适用于我有限的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工作了一个月左右，所以我对这方面的经验不足。我希望在这方面提供任何帮助或建议。我甚至会向更好的方式开放，因为我确信这只是其中的一种。

来源

2017-04-20 Zoopy

如何动态是价值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>标签）来获得我想要的包装效果。

来源

2017-04-20 06:50:51 snorkpete

谢谢，我认为这将是最好的解决方案。 department.blnHiddenOnLandingPage是不太可能改变的，我不希望它在该产品的使用寿命内发生。只是在不太可能的情况下，部门因任何原因被归档。我感觉相当愚蠢，因为在我原来的问题中，我忽略了ngFor正在循环显示未必显示的元素。 – Zoopy

尝试使用模运算符。

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

这实质上由BR每次$指数是2

来源

2017-04-20 06:36:14 nfproductions

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

您可以使用新的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"/>

来源

2017-04-20 06:48:50

首先，你检查的方式为偶数或奇数是错误的

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

我感动从span的*ngIf另一格，这样就可以插入br如果有一个按钮。

希望这有助于

来源

2017-04-20 06:54:27 brijmcq

在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周的cols，然后应用明确的：既要开始一个新行。

来源

2017-04-20 07:02:18 Eld0w

角度 - 两个行中的显示按钮

回答

相关问题