divの中にテキストを表示しますが、背景イメージとして扱います

Question

最初のテキストが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があり得るものです：ここで私が扱ってんですよ私はそれらの先行要素がそのテキストの上に重なり合うようにしたい。このようなことをどうすれば達成できますか？

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であなただけのあなたも、どこでも使用するローダーコンポーネントを作るにもでき、またはあなたがいる限り、変数showResultsにフックでき* ngIf

<div style="position: absolute; z-index: -1;" 
     *ngIf="isLoading">Loading ...</div> 

を追加する必要がありますあなたが* ngIf = "！showResults"という属性を持つshowResults divの外側にロードdivを配置すると、ちょっとしたスタイルのtweekを意味するかもしれません。