1

Mi codigo es simple un boton que muestra una lista pero no entiendo el error que me arroja solo dice

ERROR Error: "StaticInjectorError(AppModule)[NgIf -> TemplateRef]: 
  StaticInjectorError(Platform: core)[NgIf -> TemplateRef]: 
    NullInjectorError: No provider for TemplateRef!"

cual es el error en el codigo ?

mi componente

import { Component, OnInit } from '@angular/core';
import { Pelicula} from '../modelo/pelicula';
@Component({
  selector: 'app-lista-peliculas',
  templateUrl: './lista-peliculas.component.html',
  styleUrls: ['./lista-peliculas.component.css']
})
export class ListaPeliculasComponent {
  public pelicula:Pelicula;
  public mostrarDatos:boolean;

  constructor() {
    this.pelicula = new Pelicula(1, "El caballero de la Noche", "Christopher Nolan", 2008 );
    this.anuncio();
    this.mostrarDatos = false;
  }
  anuncio(){
    console.log(this.pelicula);
  }
  botonMostrar(){
    this.mostrarDatos = true;
  }
}

y mi html

<h2 class="titulo-lista">Listado de Peliculas</h2>
<button (click)="botonMostrar()">mostrar peliculas</button>
<ul ngIf="mostrarDatos === true">
  <li>Pelicula: {{pelicula.titulo}}</li>
  <li>Director: {{pelicula.director}}</li>
  <li>Anio: {{pelicula.anio}}</li>
</ul>

2 respuestas 2

2

TL;DR: es *ngIf con asterisco, no ngIf

El error está en que no estás usando la directiva del if de manera correcta. Te falta el asterisco (*): *ngIf

Tienes que repararlo así:

<ul *ngIf="mostrarDatos"> 
  <li>Pelicula: {{pelicula.titulo}}</li>
  <li>Director: {{pelicula.director}}</li>
  <li>Anio: {{pelicula.anio}}</li>
</ul>

En la documentación te explican que el asterisco significa que estás usando una directiva estructural. La directivas estructurales forman y deforman el HTML que escribiste en directivas normales, pero simplificando su uso para mejor entendimiento del escritor del código y para el lector. Detras de todo esto Angular expande el *ngIf en las directivas correspondientes, que también podés usar directamente si querés tener todo el control, pero no son generalmente usadas.

Por ejemplo, tu código se puede volver a escribir como:

<ng-template [ngIf]="mostrarDatos">
   <ul> 
     <li>Pelicula: {{pelicula.titulo}}</li>
     <li>Director: {{pelicula.director}}</li>
     <li>Anio: {{pelicula.anio}}</li>
   </ul>
</ng-template>

Que es exactamente lo que Angular hará al compilar. Pero como verás no hay mucho beneficio para vos como desarrollador y menos para el que tenga que leer tu código.

Pocas veces me he visto obligado a usar las directivas directamente. Pero si entiendes el inglés sería bueno que leas la documentación que te enlacé arriba. Entender el uso de las directivas estructurales, el uso de ng-template y ng-container te permite hacer otras cosas interesantes como reusar plantillas, escribir HTML que sea más dinámico (busca el uso de ngSwitch), etc.

Por cierto, nótese que en hice un pequeño cambio en tu código de <ul *ngIf="mostrarDatos === true"> a <ul *ngIf="mostrarDatos">. Podés jugar con un *ngIf casi como jugas con un if (...) normal de JavaScript.

2
  • @gerardo-bautista Si mi respuesta fue de ayuda puedes aceptarla. Así otras personas también pueden beneficiarse.
    – Nery Ortez
    Commented el 14 jul. 2018 a las 2:56
  • Me ha funciona perfecto Nery, agradezco tu respuesta. Saludos! Commented el 14 jul. 2018 a las 4:45
0

Debes estar usando la etiqueta <template>...</template> en uno de tus templates de tus componentes.

Cambia el tag y usa <ng-template>...</ng-template>.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.