在div中显示文本但将其视为背景图像

Question

我正在尝试创建一个div，其中包含初始文本loading...，之后可以与加载到其中的新元素重叠。这就是我正在处理的事情：

<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>

但是当我运行它时，这就是我得到的东西，如

因此，当我希望那些前进元素重叠在该文本的顶部时，我的'loading ...'文本具有它自己的边界。我怎样才能完成这样的事情？

Answer 1

您可以为加载程序创建一个布尔值。

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 =＆＃34;！showResults＆ ＃34; ，这可能意味着一点风格的调整。