web-dev-qa-db-fra.com

Angular 2 Impossible de se lier à 'ngif' car ce n'est pas une propriété connue

J'expérimente avec Angular 2. J'ai une application de test fonctionnelle avec deux composants. Tout fonctionne, mais elle se bloque lorsque j'essaie d'utiliser *ngif

Il y a déjà beaucoup de questions sur ce problème mais la plupart des réponses pointent vers l'importation de "BrowserModule" pour résoudre le problème. Dans mon cas, je le fais déjà. Quoi d'autre pourrait être à l'origine de ce problème?

mon html

<table class='table' *ngif="products && products.length">

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent }  from './app.component';
import { CrazyComponent }  from './products/crazy.component';

@NgModule({
      imports: [ BrowserModule ],
      declarations: [ AppComponent, CrazyComponent ],
      bootstrap: [ AppComponent ]
})
export class AppModule { }

L'erreur complète:

Impossible de se lier à 'ngif' car ce n'est pas une propriété connue de 'table'. La liaison de propriété ngif n'est utilisée par aucune directive sur un modèle incorporé. Assurez-vous que le nom de la propriété est correctement orthographié et que toutes les directives sont répertoriées dans la section "directives"

angulartypescriptangular-ng-if
6
Kokodoko

Vous avez une faute de frappe. Utilisez ngIf au lieu de ngif

Bonne façon de l'utiliser:

 <table class='table' *ngIf="products && products.length">

MISE À JOUR :

De nombreuses personnes (dont moi) ont eu ce problème, car la saisie semi-automatique IntelliJ IDEA/WebStorm donne un ngif non valide. De plus, IDEA met en évidence *ngIf comme invalide.

Récemment, j'ai mis à niveau mon IDEA vers 2017.2.5 avec les plug-ins JS/Angular et ce problème a disparu. De plus, j'ai obtenu une meilleure autocomplétion NG2 + et un meilleur support TypeScript. C'est pourquoi je fortement recommande de mettre à niveau le logiciel JetBrains.

28
rzelek

vous avez une erreur à cause de "* ngif" la bonne est "* ngIf". Le "I" majuscule ici et le "F" majuscule dans * ngFor..I ont souvent mal tapé. Soyez juste un peu patient. :)

0
Sidharth Sahu