Насколько я понимаю, оба выполняют одинаковые функции. Но,
Мое понимание верно? или же Не могли бы вы рассказать больше о деталях
ngFor
иngForOf
?
Насколько я понимаю, оба выполняют одинаковые функции. Но,
Мое понимание верно? или же Не могли бы вы рассказать больше о деталях
ngFor
иngForOf
?
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 руководство по микросинтезу, чтобы узнать больше.
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>
По моему мнению, что я получил от углового документа,
[ngFor]
не является type safe
[NgForOf]
- это type safe
Потому что обе детали класса немного отличаются
ngFor
класса ngFor
- any
тип
Но ngForOf
класса ngForOf
является общим ngForOf: NgIterable<T>
ngForOf
выглядит как дженерики, о которых я уже упоминал в своем вопросе.
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>
Явная версия
(<template ngFor ...>)
позволяет сразу применить директиву к нескольким элементамНеявная версия