ngif其他重叠divs Angular4
问题描述:
我订阅了一个流以从第三方API获取一些数据,而当发生这种情况时,我会显示一个带有纺轮的东西。一旦我有数据,那么这些数据就取代了这个div。我有与ngif else
:ngif其他重叠divs Angular4
<div *ngIf="my-data;else loading" class="my-data-container">
...
</div>
<ng-template #loading>
<div class="loading-container">
shows the loading spinning wheel
</div>
</ng-template>
这个问题我已经是一段非常短的时期双方的div出现在屏幕上,他们作出这样一个小光点的奇效。我希望他们互相重叠,否则他们会出现在另一个之下。我可以通过代码来实现吗?还是需要调查css技巧?
答
确保你在开始申报my-data
值null
和改变ngIf
语法使用容器使用then
:
<div *ngIf="my-data; then #content; else loading" class="my-data-container">
</div>
<ng-template #content>
show this content after loading
</ng-template
<ng-template #loading>
<div class="loading-container">
shows the loading spinning wheel
</div>
</ng-template>
答
为ngif模板而不是DIV它的自我
<ng-container *ngIf="my-data;else loading">
<div class="my-data-container">
...
</div>
</ng-container>
<ng-template #loading>
<div class="loading-container">
shows the loading spinning wheel
</div>
</ng-template>
你如何初始化我的数据? – Vega
我通过订阅ngOnInit方法上的observable来实现: ngOnInit(){this.myDataService.get() .subscribe(g => {this.my-data = g}); } –
将div内容移动到其他ng-template并在ngIf上添加then选项。如果你愿意,我可以发布我的建议 – Vega