В чем разница между [ngFor] и [ngForOf] в angular2?

как я понимаю,оба делают то же самое функции. Но,

правильно ли мое понимание? или Не могли бы вы поделиться больше разницы (подробнее) о ngFor и ngForOf?

39
angular ngfor typescript

5 ответов

ngFor и ngForOf это не две разные вещи - они на самом деле являются селекторами директивы NgForOf.

при проверке источник, вы увидите, что директива NgForOf имеет в качестве селектора:[ngFor][ngForOf], что означает, что оба атрибута должны присутствовать на элементе для директивы, чтобы "активировать", так сказать.

при использовании *ngFor, угловой компилятор де-сахаров, что синтаксис в его канонической форме, которая имеет оба атрибута на элемент.

и

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

desugars на:

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

это первое де-шугаринг из-за '*'. Следующий de-sugaring из-за микро синтаксиса: "пусть элемент элементов". Угловой компилятор де-сахара, что:

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

(где вы можете думать о $implicit как о внутренней переменной, которую директива использует для ссылки на текущий элемент в итерации).

в канонической форме атрибут ngFor является просто маркер, в то время как атрибут ngForOf фактически является входом в директиву, которая указывает на список вещей, которые вы хотите повторить.

вы можете проверить Угловое микросинтаксис руководство чтобы узнать больше.

50

ngFor является структурной директивой угловой, которая заменяет ng-repeat атрибут AngularJS

можно использовать ngFor как стенография

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

или как версия longhand

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

NgFor можете перебирать массив, но в ngContainer, ngContent мы не можем итерировать ngFor прямо так на переборе мы можно использовать [ngForOf]. Здесь I-переменная, рейтинги-это массив.

Ex. 

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

в этом примере я хочу применить ngFor и ngIf одновременно, поэтому я использовал его.

другое мнение заключается в том, что при нормальном, если мы применяем ngFor, то при рендеринге он преобразует его в

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

по-моему, что я получил из углового документа,

  • [ngFor] не type safe
  • [NgForOf] и type safe

потому что обе детали класса мало чем отличаются

  • ngFor типа any тип

  • но ngForOf деталь класса ngForOf : NgIterable<T>

ngForOf похоже на дженерики о чем я уже упоминал в своем вопросе.

1

явная версия

  • (<template ngFor ...>) позволяет применять директиву к нескольким элементам одновременно

неявные версии

  • только обертывает элемент, где он применяется
0