web-dev-qa-db-ja.com

angle2の[ngFor]と[ngForOf]の違いは何ですか？

私の理解では、両方が同じ機能を実行しています。しかし、

  • ngForは collections ？のように動作します

  • ngForOfは generics ？のように動作します

私の理解は正しいですか？またはngForとngForOfについての違い（詳細）を教えてください。

angulartypescriptngfor
45
Ramesh Rajendran

ngForとngForOfは2つの異なるものではありません-実際にはNgForOfディレクティブのセレクターです。

source を調べると、NgForOfディレクティブのセレクターが[ngFor][ngForOf]であることがわかります。つまり、ディレクティブを「アクティブ化」するには、両方の属性が要素に存在する必要があります。いわば。

*ngForを使用すると、Angularコンパイラーは、その構文を、要素に両方の属性を持つ標準的な形式に戻します。

そう、

  <div *ngFor="let item of items"></div>

脱糖：

 <template [ngFor]="let item of items">
     <div></div>
 </template>

この最初の脱糖は「*」によるものです。次のデシュガーは、マイクロ構文「アイテムのアイテムを許可」によるものです。 Angularコンパイラは、次のことを行います。

 <template ngFor let-item="$implicit" [ngForOf]="items">
   <div>...</div>
 </template>

（$ implicitは、反復で現在のアイテムを参照するためにディレクティブが使用する内部変数と考えることができます）。

その標準的な形式では、ngFor属性は単なるマーカーであり、ngForOf属性は実際には、繰り返し処理するもののリストを指すディレクティブへの入力です。

詳細については、 Angular microsyntax guide をご覧ください。

57
snorkpete

ngForはAngularの構造ディレクティブで、AngularJSのng-repeat属性を置き換えます

ngForを短縮形として使用できます

<li *ngFor="let item of items">{{item.name}}</li>

または手書き版として

<template ngFor let-item="$implicit" [ngForOf]="items">
  {{item.name}}
</template>
5
devnull69

私の意見では、angularドキュメントから得たものは、

  • [ngFor]はtype safeではありません
  • [NgForOf]はtype safeです

両方のクラスの詳細が少し異なるため

  • ngForクラスタイプはanyタイプです

  • ただし、ngForOfクラス型はジェネリックngForOf : NgIterable<T>

ngForOfは、私の質問ですでに言及したジェネリックのように見えます。

2
Ramesh Rajendran

NgForは配列を反復処理できますが、ngContainerでは、ngContentではngForを直接反復処理できないため、反復処理には[ngForOf]を使用できます。ここで、iは可変で、評価は配列です。

例.

 <ng-template ngFor let-i [ngForOf]="ratings">
                  <option *ngIf="i<=22" [ngValue]="i">{{i}}:00 Hrs.</option>
   </ng-template>

この例では、ngForとngIfを同時に適用したいので、使用しました。

もう1つのビューは、通常はngForを適用し、レンダリング時に変換するというものです。

<template ngFor let-i [ngForOf]="ratings">
   <HTML Element>...</HTML Element>
 </template>
1
rajeev omar

明示的なバージョン

  • (<template ngFor ...>)を使用すると、ディレクティブを複数の要素に一度に適用できます

暗黙のバージョン

  • 適用される要素のみをラップします
0
user7427848