Angular 2无法绑定到'ngif',因为它不是已知属性

Question

我正在试验Angular 2.我有一个有两个组件的工作测试应用程序.这一切都有效,但在我尝试使用时崩溃了*ngif

关于这个问题已经有很多问题,但大多数答案都指向导入"BrowserModule"来解决问题.就我而言,我已经这样做了.还有什么可能导致这个问题？

我的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 { }

完整的错误:

无法绑定到'ngif',因为它不是'table'的已知属性.嵌入式模板上的任何指令都未使用的属性绑定ngif.确保属性名称拼写正确,并且所有指令都列在"指令"部分中

Answer 1

你有一个错字.用ngIf而不是ngif

正确的使用方法:

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

更新:

许多人(包括我)都遇到了这个问题,因为IntelliJ IDEA/WebStorm自动完成功能无效ngif.此外,IDEA强调*ngIf无效.

最近我将我的IDEA与JS/Angular插件一起升级到了2017.2.5,这个问题就消失了.此外,我有更好的NG2 +自动完成和更好的TypeScript支持.这就是我强烈建议升级JetBrains软件的原因.