在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文本。我怎樣才能完成這樣的事情？

來源

2016-12-28 Syntactic Fructose

你拼寫成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。

來源

2016-12-28 05:21:15

在div中顯示文本，但將其視爲背景圖像

回答

相關問題