Solución:
La sintaxis de asterisk es un azúcar sintético para una sintaxis de plantilla con más palabras que la directiva se expande bajo el capó, usted es libre de usar cualquiera de estas opciones.
Cita de los documentos:
El asterisco es “azúcar sintáctico”. Simplifica ngIf y ngFor tanto para el escritor como para el lector. Bajo el capó, Angular reemplaza la versión de asterisco con una forma más detallada.
<!-- 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>
Los siguientes dos ejemplos de ngIf son efectivamente iguales y podemos escribir en cualquier estilo: Angular2 ofrece un tipo especial de directivas:
Directivas estructurales <template> Las directivas estructurales se basan en el
etiqueta. * los <template> antes de que el selector de atributos indique que se debe aplicar una directiva estructural en lugar de una directiva de atributo normal o un enlace de propiedad. Angular2 expande internamente la sintaxis a un explícito
etiqueta. <ng-container> Desde el final también está el <template> elemento que se puede utilizar de forma similar al
<ng-container *ngIf="boolValue">
<div *ngFor="let x of y"></div>
</ng-container>
etiqueta pero admite la sintaxis abreviada más común. Esto es necesario, por ejemplo, cuando se deben aplicar dos directivas estructurales a un solo elemento, que no está respaldado. * Angular trata los elementos de la plantilla de una manera especial. los <template> la sintaxis es un atajo que le permite evitar escribir todo
elemento. Dejame mostrarte como funciona.
*ngFor="let t of todos; let i=index"
usando esto
template="ngFor: let t of todos; let i=index"
lo traduce en
<template ngFor [ngForOf]="todos" .... ></template>
que luego se convierte en ngFortambién las directivas estructurales de Agular como ngIf , * etc. Prefijado por
solo para diferenciarlos de otras directivas y componentes personalizados
ver más aquí