Jakie jest znaczenie * in * ngFor in angle2?

Question

Co to jest oznaczenie * before ngDla tej próbki i dlaczego jest potrzebna?

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

Answer 1

ngFor może być stosowana tylko do <template>. *ngFor to krótka forma, którą można zastosować do dowolnego elementu, a element <template> jest tworzony niejawnie za sceną.

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

Składnia

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

To ten sam wzór dla wszystkich structural directives

Plunker example

aktualizacja

Wraz z 2.0.0 ostatecznej wersji <ng-container> został wprowadzony, że zachowuje się jak <template> (element otoki, że w rzeczywistości nie jest dodawany do DOM), ale obsługuje składnię *ngFor="...".

Answer 2

Cytat z oficjalnej dokumentacji Kątowymi:

Po sprawdzeniu wbudowanych dyrektyw NgFor i NgIf nazwaliśmy się nietypowe składni: gwiazdka (*), który pojawia się przed dyrektywy Nazwa.

to trochę cukru syntaktycznego, który ułatwia czytanie i zapisywanie dyrektyw modyfikujących układ HTML za pomocą szablonów. NgFor, NgIf i NgSwitch wszystko dodaje i usuwa elementy poddrzewa, które są zapakowane w znaczniki <template>.

Aby uzyskać więcej szczegółów prosimy sprawdzić https://angular.io/docs/ts/latest/guide/template-syntax.html#!#star-template

* ngFor ma cztery właściwości: indeksu, ostatni, nawet i nieparzyste. Możemy uzyskać wartość indeksu na iterację, ostatnią wartość, nieparzystą, a nawet sam indeks przy użyciu zmiennych lokalnych. Oto przykład roboczych:

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 3

Kiedy kątowa widzi gwiazdki (*) w ngFor, użyje jej elementu DOM jako szablon do renderowania pętlę.

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

jest równoważna

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

Answer 4

Są one znane jako dyrektywach strukturalnych, ponieważ mają zdolność do zmiany struktury DOM. Aby uzyskać więcej informacji, odwiedź stronę https://angular.io/guide/structural-directives.

Answer 5

W *ngFor * jest skrótem do stosowania nowej składni szablonowej kanciastej ze znacznikiem szablonu, jest to również nazywane dyrektywą strukturalną. Warto wiedzieć, że * jest skrótem do jawnego definiowania powiązań danych na szablonie etykietka.