angular2: Почему мы используем asterik с ngif и ngfor?

Question

вот пример кода для заданного вопроса. <p *ngIf="heroes.length >= 4">There are many heroes!</p> Если я удалить * он дает мне ошибку

Answer 1

источник: https://angular.io/docs/ts/latest/guide/structural-directives.html#!#asterisk

Звездочкой (*) эффект

КОПИЯ КОД

<div *ngIf="hero">{{hero}}</div> 
<div *ngFor="let hero of heroes">{{hero}}</div> 

Мы предваряя эти имена директивы со звездочкой (*).

Звездочка - это «синтаксический сахар». Это упрощает ngIf и ngFor как для писателя, так и для читателя. Под капотом Angular заменяет версию звездочки более подробной формой.

Следующие два примера ngIf являются фактически то же самое, и мы можем написать в любом стиле:

КОПИЯ КОД

<!-- Examples (A) and (B) are the same --> 
<!-- (A) *ngIf paragraph --> 
<p *ngIf="condition"> 
    Our heroes are true! 
</p> 

<!-- (B) [ngIf] with template --> 
<template [ngIf]="condition"> 
    <p> 
    Our heroes are true! 
    </p> 
</template> 

Большинство из нас предпочел бы написать в стиле (A).

Стоит знать, что Angular расширяет стиль (A) в стиле (B). Он перемещает абзац и его содержимое внутри тега. Он перемещает директиву до метки, где она становится привязкой к свойствам, окруженной квадратными скобками. Логическое значение свойства условия компонента хоста определяет, отображается ли шаблонный контент или нет.

Answer 2

Причина, по которой мы используем asterik для директив ngIf и ngFor, заключается в том, что они меняют структуру DOM. и их также называют структурными директивами. Каждый строковый указатель с астериком.

Примеры структурных директив: * ngIf * ngFor * ngSwitchCase * ngSwitchDefault и т.д., некоторые примеры структурных директив

Пример кода:

<p *ngIf="true"> Expression is true and ngIf is true. This paragraph is in the DOM. </p> 

<p *ngIf="false"> Expression is false and ngIf is false. This paragraph is not in the DOM.</p> 

Checkout ссылку нырять глубоко в структурные директивы: https://angular.io/guide/structural-directives