首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >有条件地根据项目数切换按钮显示

有条件地根据项目数切换按钮显示
EN

Stack Overflow用户
提问于 2016-06-09 01:45:27
回答 2查看 342关注 0票数 0

我有一个基于超文本标记语言项目列表来显示按钮的ngFor。该列表可以包含0个或多个项目。我想根据列表中的项目数量来切换其他按钮的显示,例如,如果列表中有0个项目,则不会显示该按钮;如果列表中有超过0个项目,则会显示该按钮。下面是我的代码:

代码语言:javascript
复制
<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端处理这个问题,避免在另一个文件中创建整个函数。

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2016-06-09 01:49:34

您应该能够检查ngIf中的数组长度

代码语言:javascript
复制
<button *ngIf="trainingItems.length" ...>
票数 1
EN

Stack Overflow用户

发布于 2016-06-09 01:57:02

在Angular中,您可以使用NgIf directive显示/隐藏元素

在您的案例中:

代码语言:javascript
复制
<button *ngIf="trainingItems.length" type="button" class="btn btn-primary btn-block" style="background-color: #323232; margin-top: 10px">
  Start Training
</button>
票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/37709418

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档