无法绑定到'ngForOf',因为它不是'tr'的已知属性(最终版本)

Question

我正在使用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>

Answer 1

加入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 */],
  ..
})

Answer 2

就我而言,问题是我的队友*ngfor在模板中提到而不是*ngFor.奇怪的是没有正确的错误来处理这个问题(在Angular 4中).

Answer 3

您必须在使用这些内置指令(如ngFor,ngIf等)的组件中导入"CommonModule".

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


@NgModule({
  imports: [
    CommonModule
  ]
})

export class ProductModule { }

Answer 4

可能有任何可能的原因：

1. 你module没有CommonModule在imports[]
2. 您component使用的地方*ngFor不是 any 的一部分module。
3. 您可能在*ngForie**ngFor或其他中输入错误*ngfor。
4. 如果一切正常，则重新启动IDEie VS Code、IntelliJ 等。

Answer 5

对我来说，问题是我没有HouseModule在我的app.module.ts. 我有其他进口。

文件：app.module.ts

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

@NgModule({
  imports: [
    HouseModule
  ]
})

Answer 6

如果您没有在功能模块中声明路由组件，也会发生这种情况。例如：

feature.routing.module.ts:

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

功能模块.ts：

     imports: [ FeatureRoutingModule ],
     declarations: [],

注意 ViewComponent不在声明数组中，而它应该在。

Answer 7

未来的读者

检查以下各项：

1. 该组件在SINGLE angular 模块中声明
2. 确保你有 import { CommonModule } from '@angular/common';
3. 重新启动 IDE/编辑器
4. 重新启动开发服务器 ( ng serve)

Answer 8

我收到错误是因为我使用的组件未在模块的声明：[] 部分中注册。

添加组件后，错误消失了。我希望有一些比这个错误消息更模糊的东西来表明真正的问题。

Answer 9

要记住的事情：

使用自定义模块（AppModule以外的模块）时，有必要在其中导入通用模块。

yourmodule.module.ts

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

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

Answer 10

我遇到了同样的错误，您可以通过以下方法之一进行修复：

1. 如果您没有任何嵌套模块

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

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

就我而言，第二种方法解决了我的问题。
希望能帮到你

Answer 11

如果您要创建自己的模块,则在您自己的模块中的导入中添加CommonModule

Answer 12

以防万一有人在尝试导入后仍然遇到错误CommonModule，请尝试重新启动服务器。它出奇地有效

Answer 13

将组件添加到您的 app.module

import { ModalComponent } from './modal/modal.component';

@NgModule({
  declarations: [ModalComponent],
  entryComponents: [ModalComponent],
  
  }),
  providers: [
  ],
  bootstrap: [AppComponent]
})

Answer 14

就我而言，该组件未在 app.module.ts 中列出。

Answer 15

如果您在 Angular 版本 14+ 中遇到组件可以独立运行的错误，只需将 NgFor 添加到组件的导入中，如下所示：

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

@Component({
selector     : 'my-component',
templateUrl  : './my-component.component.html',
encapsulation: ViewEncapsulation.None,
standalone   : true,
imports      : [ NgFor],
})

export class MyComponent implements OnInit
{
   ...
}