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軟件的原因。

Answer 2

你有一個錯誤，因為“* ngif”正確的是“* ngIf”。 這里的首都'我'和* ngFor..I中的首都'F'曾多次輸錯。 只是有點耐心。 :)