有条件地根据项目数切换按钮显示
有条件地根据项目数切换按钮显示
提问于 2016-06-09 01:45:27
我有一个基于超文本标记语言项目列表来显示按钮的ngFor。该列表可以包含0个或多个项目。我想根据列表中的项目数量来切换其他按钮的显示，例如，如果列表中有0个项目，则不会显示该按钮；如果列表中有超过0个项目，则会显示该按钮。下面是我的代码：
<div class="panel-body">
<!--Panel Body-->
<button *ngFor="#trainingItem of trainingItems" type="button" style="text-align:left; margin-right: 10px;" class="btn btn-secondary btn-block">
<strong>Name: </strong> {{trainingItem.Name}}
<strong>Location: </strong> {{trainingItem.LocationName}}
</button>
<!--This is the button I want to toggle based on the number of items-->
<button type="button" class="btn btn-primary btn-block" style="background-color: #323232; margin-top: 10px">Start Training</button>
</div>我知道我可以通过在Typescript类中创建一个函数来处理这个问题，该函数根据列表中的项数来切换值，但我希望完全在HTML端处理这个问题，避免在另一个文件中创建整个函数。
回答 2
Stack Overflow用户
回答已采纳
发布于 2016-06-09 01:49:34
您应该能够检查ngIf中的数组长度
<button *ngIf="trainingItems.length" ...>Stack Overflow用户
发布于 2016-06-09 01:57:02
在Angular中，您可以使用NgIf directive显示/隐藏元素
在您的案例中：
<button *ngIf="trainingItems.length" type="button" class="btn btn-primary btn-block" style="background-color: #323232; margin-top: 10px">
Start Training
</button>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/37709418
复制相关文章
相似问题
腾讯云开发者
