2016-06-08 68 views
0

我有一個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> 

我知道我可以通過在我的打字稿類功能切換基於列表中的項目數的值處理這個問題,但我想在HTML完全處理這個問題並防止需要在另一個文件中創建整個功能。

回答

1

你應該能夠檢查數組長度在ngIf

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

在角可以顯示/隱藏與NgIf directive

的元素,你的情況: <button *ngIf="trainingItems.length" type="button" class="btn btn-primary btn-block" style="background-color: #323232; margin-top: 10px">Start Training</button>