Context error problem with Angular2c

Question

Context error problem with Angular2c

Navigation

#1 by (2 votes)
#2 by (0 votes)

1

My code is simple a button that shows a list but I do not understand the error that throws me just says

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

What is the error in the code?

my component

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;
  }
}

and my 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>

typescript angular

asked by Gerardo Bautista 14.07.2018 в 00:35

source

2 answers

0

You must be using the <template>...</template> tag in one of your templates of your components.

Change the tag and use <ng-template>...</ng-template>.

answered by 14.07.2018 в 00:54

Android Studio min sdk 22 is not possible Is there any way to configure Python to detect all errors without having to execute the script?

score 2 · Accepted Answer

TL; DR: is *ngIf with asterisk, not ngIf

The error is that you are not using the if directive correctly. You are missing the asterisk (*): *ngIf

You have to repair it like this:

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

In the documentation they explain that the asterisk means that you are using directiva estructural . The structural directives form and deform the HTML that you wrote in normal directives, but simplifying its use for better understanding of the code writer and the reader. Behind all this Angular expands the *ngIf in the corresponding directives, which you can also use directly if you want to have full control, but they are not generally used.

For example, your code can be rewritten as:

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

Which is exactly what Angular will do when compiling. But as you will see, there is not much benefit for you as a developer and less for those who have to read your code.

Seldom have I been forced to use directives directly. But if you understand English it would be good if you read the documentation that I linked you up. Understand the use of structural directives, the use of ng-template and ng-container allows you to do other interesting things like reuse templates, write HTML that is more dynamic (look for the use of ngSwitch), etc.

By the way, notice that I made a small change in your code from <ul *ngIf="mostrarDatos === true"> to <ul *ngIf="mostrarDatos"> . You can play with *ngIf almost like you play with% normal JavaScript%.