'ng'の既知のプロパティではないため、 'ngForOf'にバインドできません（最終リリース）

Angular2 Finalリリース（2.1.0）を使用しています。会社のリストを表示したいときに、このエラーが発生しました。

でfile.component.ts：

public companies: any[] = [
    { "id": 0, "name": "Available" },
    { "id": 1, "name": "Ready" },
    { "id": 2, "name": "Started" }
];

でfile.component.html：

<tbody>
  <tr *ngFor="let item of companies; let i =index">
     <td>{{i}}</td>
     <td>{{item.name}}</td>
  </tr>
</tbody>

追加BrowserModuleのimports: []中@NgModule()には、ルートモジュールの場合は（AppModule）、そうでありませんCommonModule。

// older Angular versions
// import {BrowserModule, CommonModule} from '@angular/common';

import { BrowserModule } from '@angular/platform-browser'
..
..
@NgModule({
  imports: [BrowserModule, /* or CommonModule */],
  ..
})

私の場合、問題は私のチームメイトがの*ngfor代わりにテンプレートで言及したことでした*ngFor。この問題を処理するための正しいエラーがないことは奇妙です（Angular 4）。

ngFor、ngIfなどの組み込みディレクティブを使用しているモジュールに「CommonModule」をインポートする必要があります。

import { CommonModule } from "@angular/common";


@NgModule({
  imports: [
    CommonModule
  ]
})

export class ProductModule { }

覚えておくべきこと：

カスタムモジュール（AppModule以外のモジュール）を使用する場合は、その中に共通モジュールをインポートする必要があります。

yourmodule.module.ts

import { CommonModule } from '@angular/common';

@NgModule({
  imports: [
    CommonModule
  ],
  exports:[ ],
  declarations: []
})

独自のモジュールを作成している場合は、独自のモジュールのインポートにCommonModuleを追加します

これは、機能モジュールでルートコンポーネントを宣言しない場合にも発生する可能性があります。だから例えば：

feature.routing.module.ts：

...
    {
        path: '',
        component: ViewComponent,
    }
...

feature.module.ts：

     imports: [ FeatureRoutingModule ],
     declarations: [],

ViewComponentが宣言配列にないことに注意してください。

カスタムモジュールには共通モジュールが必要

「@ angular / common」から{CommonModule}をインポートします。

@NgModule（{インポート：[CommonModule]}）

「app-routing.module」を使用すると、「CommonModule」のインポートを忘れます。インポートすることを忘れないでください！

import { CommonModule } from "@angular/common";
@NgModule({  imports: [ CommonModule]})

同じエラーが発生しましたが、CommonModuleをインポートしました。代わりに、モジュールを分割するときのコピー/貼り付けのために、コンマを残してはいけません。

@NgModule({
    declarations: [
        ShopComponent,
        ShoppingEditComponent
    ],
    imports: [
        CommonModule,
        FormsModule,
        RouterModule.forChild([
            { path: 'shop', component: ShopComponent }, <--- offensive comma
        ])
    ]
})

app.module.tsが修正され、次のように変更されました：アプリモジュールにBrowserModuleをインポートする

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

@NgModule({
  declarations: [
    AppComponent    
  ],
  imports: [
    BrowserModule, 
  ],     
  providers: [],
  bootstrap: [AppComponent]
})

同じエラーが発生しました。この方法のいずれかで修正できます：

1. ネストされたモジュールがない場合

   a。アプリモジュールにCommonModuleをインポートする

   b。* ngForをApp Moduleに追加するコンポーネントをインポートし、宣言で定義します

// file App.modules.ts
@NgModule({
  declarations: [
    LoginComponent // declarations of your component
  ],
  imports: [
    BrowserModule
    DemoMaterialModule,
    FormsModule,
    HttpClientModule,
    ReactiveFormsModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production })
  ],
  providers: [
    ApiService, 
    CookieService, 
    {
      provide: HTTP_INTERCEPTORS,
      useClass: ApiInterceptor,
      multi: true
    }
  ],
  bootstrap: [AppComponent]
})

c。あなたは[インポートをルーティングするための独立したモジュールファイルを使用している場合はCommonModuleあなたのルーティングモジュール他のインポートでCommonModuleあなたの中のアプリケーションのモジュール

// file app.routing.modules.ts
import { LoginComponent } from './login/login.component';
import { CommonModule } from "@angular/common";

const routes: Routes = [
  { path: '', component: LoginComponent },
  { path: 'login', component: LoginComponent }
];

@NgModule({
  imports: [RouterModule,RouterModule.forRoot(routes), CommonModule],
  exports: [RouterModule]
})

2. ネストされたモジュールがある場合、その特定のモジュールで最初のステップを実行します

私の場合、2番目の方法で問題が解決しました。
これがあなたを助けることを願っています

私にとっての問題は、カスタムメイドのモジュールHouseModuleを自分のapp.module.tsです。他の輸入品がありました。

ファイル：app.module.ts

import { HouseModule } from './Modules/house/house.module';

@NgModule({
  imports: [
    HouseModule
  ]
})

今後の読者

次のそれぞれを確認します。

• コンポーネントはSINGLEで宣言されています角度モジュールでます
• あなたが持っていることを確認してください import { CommonModule } from '@angular/common';
• IDE /エディターを再起動します

Angular8ベースのライブプロジェクトを開始したところ、上記の問題が発生しましたが、「app-routing.module」を使用すると、「CommonModule」のインポートを忘れてしまいます。インポートすることを忘れないでください！

import { CommonModule } from '@angular/common';

@NgModule({
  imports: [
    CommonModule
]})

それはあなたのエラーを解決します。

ルートを使用すると問題が発生し、任意のモジュールの静的コンテンツを表示できますが、* ngIgなどのani関数機能を使用しようとすると機能しません。 imports []で、サーバーを終了して終了するかサーバーを強制終了して、サーバーで実行を再試行すると、問題が解決します。これでうまくいかない場合は、別の方法を試してください。

英語が下手でごめんなさい。

**が原因で問題が発生しました*代わりに*

*ngFor="let ingredient of ingredients"

**ngFor="let ingredient of ingredients"

*ngIfすべてのインポートが正常で、コンポーネントが他のエラーなしでレンダリングされ、ルーティングが正常であったとしても、同様のエラー（）が発生しました。

私の場合AppModule、その特定のモジュールは含まれていませんでした。奇妙なことに、これは不満ではありませんでしたが、これはIvyの動作に関連している可能性がng serveあります（ルーティングによるロードモジュールの種類ですが、その依存関係は考慮されていません）。

このエラーで特定の1ページだけが約1時間失われました。ここですべての答えを試しましたが、最後に解決策はngで全体を再構築することでした、問題はちょうど消えました...

確認してください

1. ディレクティブに構文エラーはありません

2. ブラウザ（アプリモジュール内）および共通（その他/子内）モジュールがインポートされます（GünterZöchbauerが前述したものと同じ）

3. アプリケーションにルートがある場合、ルートモジュールをApp Moduleにインポートする必要があります

4. ルーティングされたコンポーネントのすべてのモジュールもApp Moduleにインポートされます。例：app-routing.module.tsは次のとおりです。

   constルート：ルート= [

   {パス： ''、コンポーネント：CustomerComponent}、

   {パス： 'admin'、コンポーネント：AdminComponent}

   ];

次に、Appモジュールは、CustomerComponentおよびAdminComponentのモジュールを@NgModule（）にインポートする必要があります。

同じ問題に直面しても、ここですべての答えを試しましたが、* ngForをtrタグに含めるのではなく、簡単な変更でこの問題を解決できました。タグに含めましたtbody。それが誰かを助けることを願っています。

<tbody *ngFor="let product of products; let i=index">
        <tr >
            <td>{{product.id}}</td>
            <td>{{product.name}}</td>
            <td>{{product.description}}</td>
            <td>{{product.quantity}}</td>
            <td>
                <button type="button" >Update</button>
                <button type="button" (click)="crudService.delete(product.id)">Remove</button>
            </td>
        </tr>
    </tbody>

子モジュールとコンポーネントの両方にCommonModuleをインポートする