angg2のng-ifと* ng-ifの違いは何ですか？

Question

ng-ifと* ng-ifの違いを理解しようとしていますが、同じように見えます。

これらのディレクティブを使用する場合、どちらか一方を選択することに留意する必要がありますか？

Answer 1

ngIfが指令です。構造指示（テンプレートベース）なので、*接頭辞を使用してテンプレートに使用する必要があります。

*ngIf次の構文（ "シンタックスシュガー"）のショートカットに対応：

相当

<template [ngIf]="condition"> 
    <p> 
    Our heroes are true! 
    </p> 
</template> 

：

<p *ngIf="condition"> 
    Our heroes are true! 
</p> 

詳細については、このドキュメントを参照してください。

• https://angular.io/docs/ts/latest/guide/structural-directives.html

Answer 2

違いは、どちらも現在のバージョンではAngular2 ;-)でサポートされていないことです。これは*ngIfまたはngIfである必要があります。

構造指令は、明示的な<template>タグまたは暗黙の<template>タグとともに使用できます。暗黙のバージョンの場合、構造指示であることを示すには*が必要です。

<template [ngIf]="someExpr"> 
    <div>content</div> 
</template> 

または2.0.0以降の明示的な

は、それがより簡潔であるため、通常、あなたが暗黙のバージョンを使用します

<div *ngIf="someExpr"></div> 

暗黙の

<ng-container *ngIf="someExpr"> 
    <div>content</div> 
</ng-container> 

好ましいです。

明示的なバージョンはいつ使用しますか？

暗黙のバージョンが機能しない場合があります。

• あなたがサポートされていませんngForとngIfのような一つの構造ディレクティブ以上を適用したい場合は、これらのいずれかの明示的なフォームを使用することができます。代わりに、あなたは複数の要素

に構造ディレクティブを適用したい場合は、

<ng-container *ngFor="let item of items"> 
    <div *ngIf="!itemHidden></div> 
</ng-container> 

• を使用することができます

  <div *ngFor="let item of items" *ngIf="!item.hidden"></div> 
  

  この無効な構文の

あなたはいくつかの項目をリストしたい例ith nameおよびprice /行

<tr> 
    <td *ngFor="???">item.name</td> 
    <td>item.price</td> 
</tr> 

<tr> 
    <ng-container *ngFor="let item of items"> 
    <td>item.name</td> 
    <td>item.price</td> 
    </ng-container> 
</tr>