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>

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

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

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