web-dev-qa-db-ja.com

Angular 2既知のプロパティではないため、「ngif」にバインドできません

Angular 2.で実験しています。2つのコンポーネントを備えた動作するテストアプリがあります。すべて動作しますが、*ngifを使用しようとするとクラッシュします

この問題についてはすでに多くの質問がありますが、ほとんどの回答は、「BrowserModule」をインポートして問題を修正することを示しています。私の場合、私はすでにそうしています。他に何がこの問題を引き起こしているのでしょうか？

my 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」にバインドできません。埋め込みテンプレートのどのディレクティブでも使用されていないプロパティバインディングngif。プロパティ名のスペルが正しく、すべてのディレクティブが「ディレクティブ」セクションにリストされていることを確認してください

angulartypescriptangular-ng-if
6
Kokodoko

あなたはタイプミスを持っています。 ngIfの代わりにngifを使用します

それを使用する正しい方法：

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

[〜＃〜]更新[〜＃〜]：

IntelliJ IDEA/WebStormオートコンプリートが無効なngifを返すため、多くの人（私を含む）がこの問題を抱えています。さらに、IDEAハイライト*ngIfは無効です。

最近、私はIDEAをJS/Angularプラグインと一緒に2017.2.5にアップグレードし、この問題はなくなりました。また、NG2 +オートコンプリートとTypeScriptサポートが改善されました。これが私が非常に JetBrainsソフトウェアをアップグレードすることをお勧めします。

28
rzelek

"* ngif"が原因でエラーが発生します。正しいエラーは "* ngIf"です。ここでの大文字の「I」と* ngFor..Iの大文字の「F」は、何度もタイプミスしていたものです。少し我慢してください。 :)

0
Sidharth Sahu