如果桌子空了，怎么不显示？

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

使用ngIf检查数组的长度，如果计数为零，则显示消息。    ＆lt; div * ngIf =＆＃34; eventList.length == 0＆＃34;＆gt;         ＆LT; H1＆GT;没有事件＆lt; / h1＆gt;     ＆LT; / DIV＆GT;     ＆lt; div * ngIf =＆＃34; eventList.length＆gt; 0＆＃34;＆GT;      ＆lt; table class =＆＃34; table table-bordered table-hover fixed-header＆＃34; ＆GT;             ＆LT; THEAD＆GT;                 ＆LT; TR＆GT;                 ＆lt; th＆gt;事件名称＆lt; / th＆gt;                 ＆LT的第i;圈＆LT; /第＆GT;                 ＆lt; th＆gt;开始日期＆lt; / th＆gt;                 ＆lt; th＆gt;开始时间＆lt; / th＆gt;                 ＆lt; th＆gt;结束日期＆lt; / th＆gt;                 ＆lt; th＆gt;结束时间＆lt; / th＆gt;                 ＆LT的第i;随机化＆LT; /第＆GT;                 ＆LT的第i;优先级＆LT; /第＆GT;                 ＆LT; / TR＆GT;             ＆LT; / THEAD＆GT;             ＆LT; TBODY＆GT;                 ＆lt; tr * ngFor =＆＃34; let event of eventList＆＃34;＆gt;                 ＆lt; td＆gt; {{event.id.eventId}}＆lt; / td＆gt;                 ＆lt; td＆gt; {{event.eventName}}＆lt; / td＆gt;                 ＆lt; td＆gt; {{event.circles}}＆lt; / td＆gt;                 ＆lt; td＆gt; {{event.startDate |日期：＆＃34; dd-MM-y＆＃34; }}＆LT; / TD＆GT;                 ＆lt; td＆gt; {{event.startTime}}＆lt; / td＆gt;                 ＆lt; td＆gt; {{event.endDate |日期：＆＃34; dd-MM-y＆＃34; }}＆LT; / TD＆GT;                 ＆lt; td＆gt; {{event.endTime}}＆lt; / td＆gt;                 ＆lt; td＆gt; {{event.randomize}}＆lt; / td＆gt;                 ＆lt; td＆gt; {{event.priority}}＆lt; / td＆gt;                 ＆LT; / TR＆GT;             ＆LT; / tbody的＆GT;         ＆LT; /表＆gt;     ＆LT; / DIV＆GT;