今天帮同事填坑发现 angular ngIf 和 else 的一个问题,由于ngIf 条件参数为定时器实时生成,导致页面if 和 else 里的元素不显示,实际上元素已经被渲染了,但是由于if 条件参数的实时变化,所以页面一直在重新渲染,所以正常的内容无法显示。
错误代码例:
<div class="countdown" *ngIf="countdownStr">
<div class="time-box">倒计时还有{{countdownStr}}</div>
<div class="foot-btn">立即参与</div>
</div>
countdownStr 的值由定时器实时生成。
正确代码例:实时生成的if元素块与其他if块分离
<div class="countdown">
<div class="time-box" *ngIf="countdownStr">倒计时还有{{countdownStr}}</div>
<div class="foot-btn" *ngIf="canJoin">立即参与</div>
</div>
这样页面就可以正常显示了。