What is the meaning of * in *ngFor in angular2?

Question

What is the meaning of * before ngFor in following sample and why it is needed?

  {{hero.         


        
                      

              相关标签:
       
      

Answer 1

They are known as Structural Directives, because they have ability to change the DOM Structure. For more information you can visit https://angular.io/guide/structural-directives .

Answer 2

ngFor can only be applied to a <template>. *ngFor is the short form that can be applied to any element and the <template> element is created implicitly behind the scene.

https://angular.io/api/common/NgForOf

Syntax

• <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>

It's the same pattern for all structural directives

Plunker example

update

With the 2.0.0 final release <ng-container> was introduced, that behaves like <template> (a wrapper element that isn't actually added to the DOM) but supports the *ngFor="..." syntax.

Answer 3

In *ngFor the * is a shorthand for using the new angular template syntax with a template tag, this is also called structural Directive.It is helpful to know that * is just a shorthand to explicitly defining the data bindings on a template tag.

Answer 4

Quote from the official Angular documentation:

When we reviewed the NgFor and NgIf built-in directives, we called out an oddity of the syntax: the asterisk (*) that appears before the directive name.

The * is a bit of syntactic sugar that makes it easier to read and write directives that modify HTML layout with the help of templates. NgFor, NgIf, and NgSwitch all add and remove element subtrees that are wrapped in <template> tags.

For more detail please check

https://angular.io/guide/template-syntax#built-in-structural-directives

https://angular.io/guide/structural-directives#asterisk

*ngFor has four properties: index, last, even, and odd. We can get the value of index per iteration, the last value, odd, or even the index itself using local variables. Here is a working example:

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>

Answer 5

When Angular sees the asterisk (*) in ngFor, it will use its DOM element as template to render the loop.

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

is equivalent to

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