如何在空表時不顯示錶格？

Question

我有一個表使用角度2中的對象數組填充。現在，當對象數組爲空時，表除了表格標題單元格以外沒有行。我怎樣才能顯示一個消息，表是空的，而不是顯示錶頭行？

<div> 
    <table class="table table-bordered table-hover fixed-header" > 
     <thead> 
      <tr> 
      <th>Event Name</th> 
      <th>Circle</th> 
      <th>Start Date</th>       
      <th>Start Time</th> 
      <th>End Date</th> 
      <th>End Time</th> 
      <th>Randomize</th> 
      <th>Priority</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr *ngFor="let event of eventList"> 
      <td>{{ event.id.eventId }}</td> 
      <td>{{ event.eventName }}</td> 
      <td>{{ event.circles }}</td> 
      <td>{{ event.startDate | date : "dd-MM-y" }}</td> 
      <td>{{ event.startTime }}</td> 
      <td>{{ event.endDate | date : "dd-MM-y" }}</td> 
      <td>{{ event.endTime }}</td> 
      <td>{{ event.randomize }}</td> 
      <td>{{ event.priority }}</td> 
      </tr> 
     </tbody>     
    </table> 
</div> 

Answer 1

使用ng如果檢查數組的長度，並且計數爲零，則顯示消息。

<div *ngIf="eventList.length == 0"> 
     <h1> No events </h1> 
    </div> 
    <div *ngIf="eventList.length > 0"> 
    <table class="table table-bordered table-hover fixed-header" > 
      <thead> 
       <tr> 
       <th>Event Name</th> 
       <th>Circle</th> 
       <th>Start Date</th>       
       <th>Start Time</th> 
       <th>End Date</th> 
       <th>End Time</th> 
       <th>Randomize</th> 
       <th>Priority</th> 
       </tr> 
      </thead> 
      <tbody> 
       <tr *ngFor="let event of eventList"> 
       <td>{{ event.id.eventId }}</td> 
       <td>{{ event.eventName }}</td> 
       <td>{{ event.circles }}</td> 
       <td>{{ event.startDate | date : "dd-MM-y" }}</td> 
       <td>{{ event.startTime }}</td> 
       <td>{{ event.endDate | date : "dd-MM-y" }}</td> 
       <td>{{ event.endTime }}</td> 
       <td>{{ event.randomize }}</td> 
       <td>{{ event.priority }}</td> 
       </tr> 
      </tbody>     
     </table> 
    </div>