* ng如果Angular4问题

Question

I am trying to work on a block of code where I can use *ngif else in introduced recently, I am hoping to see "system has no alerts" when alerts is None. Can some please explain to me what I am doing wrong. Any comment would be really helpful.

<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

With current code as soon as alerts exists, it will try to display content without looking at how much element alerts array has.

You should check alerts.length to get accurate result.

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