我正在尝试创建一个包含初始文本 loading...
的 div,稍后可以与加载到其中的新元素重叠。这是我正在处理的内容:
<div class="results" style="position:relative;" *ngIf="showResults">
<!-- show 'loading...' before the results load, which would then overlap this text -->
<div stlye="position: absolute; z-index: -1;">Loading ...</div>
<!-- angular2 loop to asynchronously load results -->
<div *ngFor="let loc of searchLocations | async" (click)="selectLocation(loc)" class="search-result">
{{ loc.name }}, {{ loc.adminName1 }}, {{ loc.countryCode }}
</div>
</div>
但是当我运行它时,这就是我得到的东西
所以我的“正在加载...”文本有它自己的边界,当我希望那些进行中的元素重叠在该文本之上时。我怎样才能完成这样的事情?
最佳答案
您可以为加载程序创建一个 bool 值。
export class YourClass(){
isLoading:boolean = true;
constructor(){
// Not sure how you are implementing your GET Request
// So no point in trying to replicate that, just where ever
// you assign searchLocations to an object
// fetch data logic ends with => {
isLoading = false;
}
}
}
然后在你的 html 中你只需要添加一个 *ngIf
<div style="position: absolute; z-index: -1;"
*ngIf="isLoading">Loading ...</div>
您甚至可以使加载器成为一个可以在任何地方使用的组件,或者您可以连接到 showResults 变量中,只要您将加载 div 放置在 showResults div 之外,属性为 *ngIf="!showResults",这可能意味着有点风格变化。
关于html - 在 div 中显示文本,但将其视为背景图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41354959/