angular ngIf 导致不点击屏幕,就无法显示内容的问题

今天帮同事填坑发现 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>

这样页面就可以正常显示了。

原文地址:https://www.cnblogs.com/unclefang/p/12419005.html