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

问题描述：

我正在尝试创建一个div，其中包含初始文本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>

但是当我运行这一点，这就是我得到的东西像

，所以我的“加载...”文本有它自己的boundry，当我想要那些流程元素重叠ontop文本。我怎样才能完成这样的事情？

你拼写成stlye的风格......可能会这样做。 – andi

你可以添加一个ngIf到你的loading-div并在你获得数据后隐藏它。 – kkreft

@andi哈哈谢谢，虽然它不包括加载文本，只是重叠它。我需要添加搜索结果元素以使其完全不透明？ –

答

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

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”，这可能意味着某种风格的tweek。

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

相关推荐