web-dev-qa-db-ja.com

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

ng-ifと*ng-ifの違いを理解しようとしていますが、見た目は同じです。

どちらを選択するか、これらのディレクティブをいつ使用するかを心に留めておくべき違いはありますか？

javascriptangularangular-ng-if
20
ShellZero

ngIfはディレクティブです。これは構造ディレクティブ（テンプレートベース）であるため、*プレフィックスを使用してテンプレートに使用する必要があります。

*ngIfは、次の構文（「構文シュガー」）のショートカットに対応します。

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

に相当：

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

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

26
Thierry Templier

違いは、両方ともAngular2ではサポートされていないことです;-)少なくとも現在のバージョンでは、*ngIfまたはngIfでなければなりません。

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

明示的

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

または2.0.0以降が望ましい

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

暗黙

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

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

明示的なバージョンを使用する場合

暗黙的なバージョンが機能しないユースケースがあります。

  • サポートされていないngForandngIfのような複数の構造ディレクティブを適用したい場合は、これらのいずれかに明示的な形式を使用できます。

この無効な構文の代わりに

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

使用できます

<ng-container *ngFor="let item of items">
  <div *ngIf="!itemHidden></div>
</ng-container>
  • 構造ディレクティブを複数の要素に適用する場合

たとえば、行ごとに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>
8
Günter Zöchbauer

シンプルにするために、最新のangularバージョンでは、たとえば以下のように* ngIfを使用する場合など。

<div *ngIf = "condition">
//code here
</div>

さて、上記のコードは実際にはangular以下によってレンダリングされます：

<ng-template [ngIf]="condition">
<div>
//code here
</div>
</ng-template>

したがって、構造ディレクティブとして* ngIfを直接使用するか、ng-templateを使用して属性ディレクティブとして[ngIf]を使用できます。これが物事をより明確にすることを願っています。

1
Abdur Rahman