web-dev-qa-db-ja.com

'tr'の証明のプロパティではないためです（最終リリース）。 'ngForOf'にバインドすることはできません。

私はAngular 2 Final release（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>
angularangular2-template
80
Mourad Idrissi

ルートモジュール（BrowserModule）の場合は@NgModule()のimports: []にAppModuleを追加し、それ以外の場合はCommonModuleを追加します。

import {BrowserModule, CommonModule} from '@angular/common';
..
..
@NgModule({
  imports: [BrowserModule, /* or CommonModule */],
  ..
})
166
Günter Zöchbauer

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

24
Mr_Green

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

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


@NgModule({
  imports: [
    CommonModule
  ]
})

export class ProductModule { }
23
Codiee

覚えておくべきこと：

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

yourmodule.module.ts

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

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

あなたがあなた自身のモジュールを作っているならば、あなた自身のモジュールのインポートにCommonModuleを追加してください

5
Alok Kamboj

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

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

@NgModule（{imports：[CommonModule]}）

1
Vinayak Shedgeri

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

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

app.module.tsの修正と変更：アプリモジュールでBrowserModuleをインポートする

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

@NgModule({
  declarations: [
    AppComponent    
  ],
  imports: [
    BrowserModule, BrowserAnimationsModule,
  ],
  exports: [BrowserModule, BrowserAnimationsModule],
  providers: [],
  bootstrap: [AppComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
0
Sanjay kumar

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

import { CommonModule } from "@angular/common";
@NgModule({  imports: [ CommonModule]})
0
Juan Carlos WebMaster Ajahuana