* ngIf Angular4问题

Question

我正在努力处理一段代码，我最近可以使用* ngif else，我希望看到＆＃34;系统没有警报＆＃34;当警报为无时。有些人可以向我解释我做错了什么。任何评论都会非常有用。

<ul class="al-msg-center clearfix">
<li class="dropdown">
    <a href class="dropdown-toggle" id="msg-dd1" data-toggle="dropdown" aria-expanded="false">
        <i (click)="refreshAlerts()" class="fa fa-bell-o"></i>
        <span *ngIf="alerts.length">{{alerts.length}} </span>

        <div class="notification-ring"></div>
    </a>

    <div class="top-dropdown-menu dropdown-menu" aria-labelledby="msg-dd1">
        <i class="dropdown-arr"></i>
        <div class="msg-list">
            <div *ngIf="alerts; else noAlerts">
                <a *ngFor="let msg of alerts" href class="clearfix">
                    <div class="msg-area">
                        <div>{{ msg.message }}</div>
                        <span>{{ msg.level }}</span>
                    </div>
                </a>
            </div>
            <ng-template #noAlerts>
                <div class="msg-area">
                    <div>"The system has no alerts"</div>
                </div>
            </ng-template>
        </div>
    </div>
</li>

Answer 1

当alerts存在时，使用当前代码，它将尝试显示内容而不查看元素alerts数组有多少。

您应该检查alerts.length以获得准确的结果。

*ngIf="alerts?.length; else noAlerts"