В чем смысл * in * ngFor в angular2?

Ответ 1

ngFor может применяться только к <template>. *ngFor - это короткая форма, которая может быть применена к любому элементу, и элемент <template> создается неявно за сценой.

https://angular.io/docs/ts/latest/api/common/index/NgFor-directive.html

Синтаксис

• <li *ngFor="let item of items; let i = index">...</li>
• <li template="ngFor let item of items; let i = index">...</li>
• <template ngFor let-item [ngForOf]="items" let-i="index"><li>...</li>

Это тот же шаблон для всех структурных директив

Пример плунжера

Обновление

С выпуском версии 2.0.0 <ng-container>, который ведет себя как <template> (элемент оболочки, который фактически не добавлен в DOM), но поддерживает синтаксис *ngFor="...".

Ответ 2

Когда Angular видит звездочку (*) в ngFor, она будет использовать свой элемент DOM в качестве шаблона для визуализации цикла.

<div *ngFor="#hero of heroes">
  {{ hero.name }}
</div>

эквивалентно

<template ngFor #hero [ngForOf]="heroes">
    <div>
       {{ hero.name }}
    </div>
</template>

Ответ 3

Цитата из официальной документации Angular:

Когда мы рассмотрели встроенные директивы NgFor и NgIf, мы вызвали странность синтаксиса: звездочка (*), которая появляется перед название директивы.

* - это немного синтаксического сахара, который облегчает чтение и пишите директивы, которые изменяют макет HTML с помощью шаблонов. NgFor, NgIf и NgSwitch все добавить и удалить поддеревья элементов, которые завернутые в теги <template>.

Подробнее см. https://angular.io/docs/ts/latest/guide/template-syntax.html#!#star-template

* ngFor имеет четыре свойства: индекс, последний, четный и нечетный. Мы можем получить значение индекса за итерацию, последнее значение, нечетное или даже самого индекса с использованием локальных переменных. Вот рабочий пример:

demoArray= [1,2,3,4,5,6,7,8,8,9];
<ul>
  <li *ngFor='#item of demoArray #i=index #l=last #e=even'>
    Item value is : {{item}} has index value is : {{i}} and last value is :{{l}} even index :{{e}}</li>
</ul>

Ответ 4

В *ngFor * является сокращением для использования нового синтаксиса шаблона angular с тегом шаблона, это также называется структурной директивой. Полезно знать, что * является просто сокращением для явного определения привязок данных на теге шаблона.

Ответ 5

Они известны как Структурные директивы, потому что они имеют возможность изменять структуру DOM. Для получения дополнительной информации вы можете посетить https://angular.io/guide/structural-directives.