Angular 角度if-then-else条件句 问题

当搜索服务忙于检索和过滤结果时，我试图显示一个微调器。我认为较新的

*ngIf

角度语法，除了if条件外，还可以使用else条件，这将是一个不错的选择。但每当我开始键入时，微调器都会正确显示，紧接着控制台中会出现错误，抱怨在运行更改检测后值发生了更改

• 如何更正此问题
• 绑定的全部目的不是要在视图中反映对组件成员/属性的更改吗？为什么变更检测不处理这个问题，而不是抱怨我的时间安排

组成部分

@组件({
选择器：“应用程序帮助搜索”，
templateUrl:'./help search.component.html'，
样式URL:['./help search.component.scss']，
提供者：[帮助搜索服务]
})
导出类HelpSearchComponent实现OnInit{
搜索：布尔；
帮助项目：可观察；
private searchTerms=新主题（）；
建造师(
私有警报服务：AppLevelAlertService，
私人helpSearchService:helpSearchService，
专用路由器：路由器{}
/**
*将搜索项推送到可观察的流中。
*/
搜索（术语：字符串）：无效{
这是真的；
this.searchTerms.next（术语）；
}
恩戈尼尼特（）{
this.helpItems=this.searchTerms
.debounceTime（300）
.distinctUntilChanged（）
.switchMap（术语=>术语
？此.helpSearchService.search（术语）
：可观察到的（[]）
)
.catch（错误=>{
this.alertService.errorOccessed.emit（新错误（Error.\u body.Error））；
（[]）的可观测收益率；
})
.最后（（）=>this.search=false）；
}
GoToHelpPitem（helpItem:helpItem）：无效{
this.router.navigateByUrl（helpItem.url.toString（））；
}
}

组件模板

搜索帮助主题：
加载。。。

我试过的
我注意到将
设置为this。在
中将
搜索为
false
。最后
谓词是导致此问题的原因。我尝试订阅
this.helpItems
，并在
下一个
谓词设置
this.search
到
false
，而不是使用这种方法。这将在返回结果时正确删除微调器。但不幸的是，这仍然不起作用，因为for循环没有取代微调器。结果出来后，两个
ng模板都会消失。
我采取了不同的方法来解决这个问题。我没有使用新的
*ngIf
if-then-else条件来决定渲染哪个
ng模板
，而是选择覆盖微调器并使用css来控制其可见性。以下是对我非常有效的改进方法：

组成部分
从'@angular/core'导入{Component，OnInit，ViewChild，ElementRef}；
从'@angular/Router'导入{Router}；
从'rxjs/Rx'导入{可观察，主题}；
从“../alerts/app-level-alert.service”导入{AppLevelAlertService}；
从“../help item”导入{HelpItem}；
从“../help search.service”导入{HelpSearchService}；
@组成部分({
选择器：“应用程序帮助搜索”，
templateUrl:'./help search.component.html'，
样式URL:['./help search.component.scss']，
提供者：[帮助搜索服务]
})
导出类HelpSearchComponent实现OnInit{
@ViewChild（“覆盖”）覆盖：ElementRef；
搜索：主题=新主题（）；
帮助项目：可观察；
private searchTerms=新主题（）；
建造师(
私有警报服务：AppLevelAlertService，
私人帮助搜索服务：帮助搜索服务）{
this.search.subscribe（search=>this.overlay.nativeElement.style.display=搜索？'block'：'none'）；
}
/**
*将搜索项推送到可观察的流中。
*/
搜索（术语：字符串）：无效{
this.search.next（true）；
this.searchTerms.next（术语）；
}
恩戈尼尼特（）{
this.helpItems=this.searchTerms
.debounceTime（300）
.distinctUntilChanged（）
.switchMap（术语=>{
常量结果=术语
？此.helpSearchService.search（术语）
：可观察到的（[]）；
返回结果；
})
.catch（错误=>{
this.alertService.errorOccessed.emit（新错误（Error.\u body.Error））；
（[]）的可观测收益率；
});
this.helpItems.subscribe（thing=>this.search.next（false））；
}
}

模板

搜索：
加载。。。

造型
您没有订阅数据。您试图实现的目标是什么？我试图在视图中显示帮助项。如果我不包括微调器，它在视图中显示得很好。但是我试图让微调器出现，直到搜索结果被呈现。有道理？
#search-box {
  display: inline-block;
  font-size: 20pt;
  height: 25pt
}

#overlay {
  position: fixed;
  display: none;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.3);
  z-index: 2;
  .spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transofrm: translate(-50%, -50%);
  }
}