Angular为何无法捕获第二次emit的值？加载Spinner无法隐藏

我调用了一个函数，先emit一个true值，3秒后再emit一个false值。在App组件中监听这些值的变化，以此显示或隐藏加载Spinner。但setTimeout中的emit(false)执行后，Spinner并未隐藏。（已确认setTimeout内代码执行正常，debugger和console.log均能正常输出）

相关代码 #

sensors-detail.component.ts #

onValveMode(){
  this.sensorsService.statusUpdate.emit(true)
  setTimeout(() => {
    debugger;
    this.sensorsService.statusUpdate.emit(false)
  }, 3000);
}

sensors-detail.component.html #

<button class="btn btn-sm fw-bold btn-primary me-2" (click)="onValveMode()">Open Valve</button>

sensors.Service.ts #

public statusUpdate = new EventEmitter<Boolean>();

app.component.ts #

isLoading:Boolean = false;
this.sensorService.statusUpdate.subscribe((status) => {
    this.isLoading = status
  }
)

app.component.html #

<div *ngIf="isLoading" id="myModal" class="modal">
    <div class="lds-roller">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</div>
<router-outlet></router-outlet>

app.component.scss #

:host {
  height: 100%;
  margin: 0;
}

/************************************************ Loadin Spinner Start  ************************************************/

// 加载动画来自loading.io/css/
.lds-roller {
    display: inline-block;
    position: relative;
    width: 80px;
    height: 80px;
}

.lds-roller div {
    animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
    transform-origin: 40px 40px;
}

.lds-roller div:after {
    content: " ";
    display: block;
    position: absolute;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #fff;
    margin: -4px 0 0 -4px;
}

.lds-roller div:nth-child(1) {
    animation-delay: -0.036s;
}

.lds-roller div:nth-child(1):after {
    top: 63px;
    left: 63px;
}

.lds-roller div:nth-child(2) {
    animation-delay: -0.072s;
}

.lds-roller div:nth-child(2):after {
    top: 68px;
    left: 56px;
}

.lds-roller div:nth-child(3) {
    animation-delay: -0.108s;
}

.lds-roller div:nth-child(3):after {
    top: 71px;
    left: 48px;
}

.lds-roller div:nth-child(4) {
    animation-delay: -0.144s;
}

.lds-roller div:nth-child(4):after {
    top: 72px;
    left: 40px;
}

.lds-roller div:nth-child(5) {
    animation-delay: -0.18s;
}

.lds-roller div:nth-child(5):after {
    top: 71px;
    left: 32px;
}

.lds-roller div:nth-child(6) {
    animation-delay: -0.216s;
}

.lds-roller div:nth-child(6):after {
    top: 68px;
    left: 24px;
}

.lds-roller div:nth-child(7) {
    animation-delay: -0.252s;
}

.lds-roller div:nth-child(7):after {
    top: 63px;
    left: 17px;
}

.lds-roller div:nth-child(8) {
    animation-delay: -0.288s;
}

.lds-roller div:nth-child(8):after {
    top: 56px;
    left: 12px;
}

@keyframes lds-roller {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.modal {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: fixed;
    z-index: 150;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0, 0, 0);
    background-color: rgba(0, 0, 0, 0.4);
}

/************************************************ Loadin Spinner End  ************************************************/

解决方法 #

在app.component.html的*ngIf语句中使用async管道即可解决该问题，组件的变更检测策略已设置为默认。

内容的提问来源于stack exchange，提问作者Mikle Culaciati