离子进度条在 (#loading) ng 模板内时无法正确显示

Question

这是我的第一个问题。我已经做了一个#加载模板，里面有一个离子进度条，但它不会显示在页面的页脚上(如果我也尝试过，也不会显示在页眉中(。它显示在页眉旁边。

<ng-container *ngIf="getLibraryService.getLibraryItem$ | async;else loading; let items"> 
// code
<ng-container>
<ng-template #loading>
<footer><ion-progress-bar type="indeterminate"></ion-progress-bar></footer>
</ng-template>

后来我尝试了一些方法来避免这个ng模板，做了一个变量isLoadingActive和一个函数isLoading(b:boolean(。但我不能让它工作不止一次：

<ng-container *ngIf="getLibraryService.getLibraryItem$ | async; else loadingCaller; let items">   
{{ showLoading(false)}}
<ng-container *ngIf="items?.length > 0; else emptyLibrary">
// code
<ng-container>
<ng-container>
<ng-template #loadingCaller>1{{showLoading(true)}}</ng-template>
<footer>
<ion-progress-bar *ngIf="isLoadingActive" type="indeterminate"></ion-progress-bar>
</footer>

我在.html中放入了一个｛｛isLoadingActive｝｝来跟踪值，当Observer<libraryItem[]>发送我在函数中筛选的新值。或者，如果我在emptyLibrary模板中放入｛｛showLoading(false(｝｝，然后用离子搜索栏进行空搜索。

我可以将离子进度条更改为我支持的另一件事，但不知道为什么我的｛｛showLoading(false(｝｝在页面第二次刷新时(当我点击过滤器按钮或进行研究时(没有触发，这让我很恼火。

Answer 1

最后我得到了这个堆栈溢出问题的解决方案：如何在Ionic4/Angular7中从@ViewChild获取nativeElement？

在html中创建一个离子进度条，并在.ts中获取子项，以编程方式修改属性。

<footer>
<ion-progress-bar color="secondary" type="indeterminate" #ionPB></ion-progress-bar>
</footer>

// VARIABLES
@ViewChild('ionPB') elemPB: IonProgressBar;
showLoading(bShow: boolean) {
if (!bShow) {
this.elemPB.type = 'determinate';
this.elemPB.value = 0;
return;
}

还有另一个可能的答案来改变我无法完成的视图(ngZone，changeDetectorRef，subjectBehavior，…(。