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

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

Мое понимание верно? или же    Не могли бы вы рассказать больше о деталях ngFor и ngForOf?

Ответы

Ответ 1

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

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

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

Итак,

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

desugars:

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

Это первое обезжиривание происходит из-за "*". Следующее обезжиривание происходит из-за микро-синтаксиса: "let item of items". Компилятор Angular де-сахара, чтобы:

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

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

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

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

Ответ 2

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

Вы можете использовать ngFor как сокращенное

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

или как версия с длинной версией

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

Ответ 3

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

  • [ngFor] не является type safe
  • [NgForOf] - это type safe

Потому что обе детали класса немного отличаются

  • ngFor класса ngFor - any тип

  • Но ngForOf класса ngForOf является общим ngForOf: NgIterable<T>

ngForOf выглядит как дженерики, о которых я уже упоминал в своем вопросе.

Ответ 4

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

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>

Ответ 5

Явная версия

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

Неявная версия

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