无法绑定到“ ngForOf”，因为它不是“ tr”的已知属性（最终发行版）

我正在使用Angular2最终版本（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()AppModuleCommonModule

// 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. 如果没有任何嵌套模块

   一个。在您的App模块中导入CommonModule

   b。导入要在App Module中添加* ngFor的组件，在声明中定义

// 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. 如果您有嵌套模块，请在该特定模块中执行第一步

就我而言，第二种方法解决了我的问题。
希望这个能对您有所帮助

对我来说，问题是我没有将定制模块导入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
]})

它将解决您的错误。

这个问题在使用Routes时出现，我们可以显示任何模块的静态内容，但是当尝试使用ani功能时，例如* ngIg不起作用，因为需要工作，比如说@Ruben Szeker，需要将Component添加到app.module.ts中在imports []上，为了完成关闭或终止实际执行ng服务器并重试运行ng服务，将解决此问题。如果这对您不起作用，请尝试另一种方法。

对不起，我的英语不好。

我因为**而遇到了问题*

*ngFor="let ingredient of ingredients"

**ngFor="let ingredient of ingredients"

*ngIf即使我的所有导入都可以，并且呈现的组件没有任何其他错误，我也遇到了类似的错误（）+路由也可以。

就我而言AppModule，不包括该特定模块。奇怪的是它没有抱怨，但这可能与Ivy的工作方式有关ng serve（根据路由选择不同的负载模块，但不考虑其依赖项）。

仅在一个特定页面上因此错误而丢失〜1h。在这里尝试了所有答案，但最终解决方案是用ng重建整个问题，问题就消失了...

所以请确定

1. 指令中没有语法错误

2. 导入了浏览器（在App模块中）和通用（在其他/子模块中）模块（与上述GünterZöchbauer相同）

3. 如果您已在应用程序中进行路由，则应将路由模块导入到App Module中

4. 所有路由组件的模块也都导入到App Module中，例如：app-routing.module.ts如下：

   const路由：路由= [

   {path：”，组件：CustomerComponent}，

   {路径：“管理员”，组件：AdminComponent}

   ];

然后，应用程序模块必须在@NgModule（）中导入CustomerComponent和AdminComponent的模块。

即使我遇到了同样的问题，我也在这里尝试了所有答案，但是一个简单的更改帮助我解决了这个问题，而不是在tr标签中包含* ngFor，而是在标签中包含了* ngFor 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