角度2 ng分割して表示するだけです

Question

Angular 2 ngIfステートメントで奇妙な問題が発生しました。ページ上に分割して表示されて消えてしまっています。私はそれを見るので働いているが、ページにとどまることは望ましくない。それは奇妙なa-syncのものだと思っています。ここでは、コードです：

<div class="holder"> 
<h2 *ngIf="!this.userHomeService.cards"> 
    You haven't created any cards. 
</h2> 
<div class="card-div" 
*ngFor="let c of this.userHomeService.cards"> 
    <h3 (click)="onSelect(c)">{{c.title}}</h3> 
</div> 

Answer 1

あなたのコントローラーを投稿しませんでしたが、私はそれに何が含まれているかを推測することができます。

1. this.userHomeService.cardsは未定義またはnullです。したがって、!this.userHomeService.cardsが真であり、「カードを作成していません。」ページに表示されます。反復するものがないので、ngForは何も表示しません。
2. 非同期リクエスト（おそらくHTTPリクエスト）に対する応答が戻ってきて、空の配列です。したがって、配列は空ですが、!this.userHomeService.cardsはfalseになり、メッセージはページから消えますので、ngForには何も表示されません。

Answer 2

divの場合は、を追加して、定義されていない値のエラーを避ける必要があります。

<div *ngIf="this.userHomeService.cards"> 
    <div class="card-div" *ngFor="let c of this.userHomeService.cards"> 
    <h3 (click)="onSelect(c)">{{c.title}}</h3> 
    </div> 
</div> 

ページに最初にYou haven't created any cards.メッセージを表示する（誘い込むフェッチデータ）を避けるために、あなたは、あなたのデータがまだサーバーからロードされていることを示すフラグのいくつかの種類を持っている必要があります。たとえば、次のように

<h2 *ngIf="this.finished && !this.userHomeService.cards"> 
    You haven't created any cards. 
</h2> 

そして、あなたのコントローラにfinished変数を追加し、あなたのhttpリクエストが終了したときにtrueに設定します。

このメッセージは、データの取得が完了したときにのみ表示されます。