2017-07-27 1 views
1

私はこの指令を<div *ngIf="show">Text to show</div>に使用しなければならない理由を知りたいと思っています.HTML呼び出しに由来するテキスト/フォームを表示する必要があります。未定義角4 Ngif指令使用方法

ある

のvar Aので、私は、HTMLを表示していたときに任意の値が含まれていないバインドさvarible:私はそれは角度を使用していない場合、私が知っている は私のようないくつかのエラーが発生します。 それはベストプラクティスですか?このような状況があるときはいつも必要ですか? これを行うにはより良い方法がありますか?

+1

例えば

<div *ngIf="things"> there is things </div> 

安全なナビゲーションオペレータとngIfを使用することの「長所と短所」。 https://angular.io/guide/template-syntax#the-safe-navigation-operator-and-null-property-paths – Alex

+1

必ずしも 'ngIf'で処理する必要はありません。 HTTPコールが完了するまで値が存在しないという事実をコンポーネントが処理できることを確認してください。例えば、コンポーネント上の 'this.text'がHTTP呼び出しの後に設定された場合、未定義のままにするのではなく、空文字列またはその他のデフォルト値に設定することができます。 –

+0

だから、必要なすべてのオブジェクトを初期化したくない場合はどうすればいいですか? @ジョークレイ – Alessandro

答えて

1

HTMLテンプレートにバインドされている初期デフォルト値で変数を定義することができます。公式文書https://angular.io/api/common/NgIfを参照してください。それ以上の質問があれば教えてください。

1

ページ上にHTMLが読み込まれると、HTTPコールがおそらく応答を返さないため、Text to showの値は未定義になります。

HTTPコールが返されたときに、Text to showを設定すると、定義されなくなり、HTMLで表示できます。あなたが好きならば「」でも、デフォルト値に

  1. 設定しText to show

    は、だからここに2つのオプションがあります。 HTTP呼び出しが返ってくると、この値を上書きすると、角度バインディングによってビューが更新されます。

  2. * ngIfディレクティブを使用して、HTMLをまだレンダリングしないように指示します(したがって、未定義変数は必要ありません)。これは、HTTP呼び出しに依存するページに複数の変数がある場合に便利です。呼び出しがすべて必要なデータを返し、すべての変数が設定されたら、変数showをtrueに設定して、HTMLのレンダリングと変数の表示を許可します。

公式ドキュメントはここにある:https://angular.io/guide/template-syntax#ngif

私は一般的にshowPage変数であり、ページのHTMLの <div *ngIf="showPage"></div>ラッパーで終わる何。 ページに必要なすべてのデータがある場合は、showPageをtrueに設定します。

1

表現結果の値は、単に真か偽

ブール値ではありませんが、代わりに、あなたが簡単に参照することがあり、オブジェクトの値になりますngif。

things = { 
car: 'Honda', 
shoes: 'Nike', 
shirt: 'Tom Ford', 
watch: 'Timex' 
}; 

典型的な使用:「物事」が存在する場合、「物があります」と表示されます。 'things'が定義されていない場合何も表示しない。 'things'はboolean true/false、 'things'は他の型であっても、オブジェクトの変数だけでもかまいません。

<div *ngIf="things.car; else noCar"> 
    Nice car! 
</div> 

<ng-template #noCar> 
    Call a Uber. 
</ng-template> 

<!-- Nice car ! --> 

anthoer例:これはngIf非常によく説明し、言及

<div *ngIf="things.car; let car"> 
    Nice {{ car }}! 
</div> 
<!-- Nice Honda! --> 

ngif template

ngif angular 4