Question

我有一个基于HTML项目列表的显示按钮。该列表可以包含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方面完全处理这个问题，并且不需要创建一个整个函数在另一个文件中。

Answer 1

您应该能够在ngIf：

中检查数组的长度

<button *ngIf="trainingItems.length" ...>

Answer 2

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

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

2 个答案: