javascript - 根据项目数量有条件切换按钮显示

Question

我有一个 ngFor，它根据 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" ...>