无法绑定到 'ngForOf'，因为它不是 'tr' 的已知属性（最终版本）

Question

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

Answer 1

如果是根模块 (AppModule)，则在 @NgModule() 中将 BrowserModule 添加到 imports: []，否则 CommonModule.

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

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

Answer 2

如果您正在制作自己的模块，请在您自己的模块的导入中添加 CommonModule

Answer 3

您必须在使用 ngFor、ngIf 等内置指令的模块中导入 CommonModule

import { CommonModule } from '@angular/common'
       
@NgModule({
    imports: [
        CommonModule
    ]
})
    
export class ProductModule { }

Answer 4

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

Answer 5

要记住的事情：

当使用自定义模块（AppModule以外的模块）时，需要导入其中的公共模块。

yourmodule.module.ts

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

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

Answer 6

自定义模块需要通用模块

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


@NgModule({
  imports: [
    CommonModule
  ]
})

Answer 7

当使用 "app-routing.module" 时，我们忘记了导入 "CommonModule"。记得导入！

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

Answer 8

我遇到了同样的错误，但是我已经 导入了 CommonModule。相反，我在不应该的地方留下了一个逗号，因为拆分模块时 copy/paste:

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

Answer 9

app.module.ts 已修复并更改为：在您的应用程序模块中导入 BrowserModule

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

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

Answer 10

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

如果您没有任何嵌套模块

一个。将 CommonModule 导入 App 模块

b。在 App Module 中添加 *ngFor 的地方导入组件，在 declarations[= 中定义12=]

// 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 否则在您的 App 中导入 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]
})

如果您有嵌套模块，则在该特定模块中执行第一步

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

Answer 11

我开始使用 Angular8 基础实时项目遇到了上述问题，但是当使用 "app-routing.module" 时我们忘记了导入 "CommonModule"。记得导入！

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

@NgModule({
  imports: [
    CommonModule
]})

它将解决您的错误。

Answer 12

对我来说，问题是我没有在 app.module.ts 中导入定制模块 HouseModule。我有其他进口商品。

文件：app.module.ts

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

@NgModule({
  imports: [
    HouseModule
  ]
})

Answer 13

我遇到问题是因为 ** 而不是 *

*ngFor="let ingredient of ingredients"

**ngFor="let ingredient of ingredients"

Answer 14

我遇到了类似的错误 (*ngIf)，即使我的所有导入都正常并且组件的渲染没有任何其他错误 + 路由正常。

在我的例子中 AppModule 不包括那个特定的模块。奇怪的是它没有抱怨这个，但这可能与 Ivy 与 ng serve 的工作方式有关（根据路由加载模块，但不考虑其依赖性）。

Answer 15

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

feature.routing.module.ts:

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

feature.module.ts:

     imports: [ FeatureRoutingModule ],
     declarations: [],

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

Answer 16

未来的读者

检查以下各项：

该组件在 SINGLE angular 模块中声明
确保你有 import { CommonModule } from '@angular/common';
重新启动IDE/editor
重启开发服务器（ng serve）

Answer 17

所以请确保

指令中没有语法错误
Browser（在 App Module 中）和 Common（在 other/child 中）模块被导入（与上述相同）
如果您在应用程序中有路由，则应在 App 模块中导入路由模块
所有路由组件的Module也在App Module中导入，例如： app-routing.module.ts如下：

常量路线：路线=[

{路径：''，组件：CustomerComponent}，

{路径：'admin'，组件：AdminComponent}

];

那么App模块必须在@NgModule()中导入CustomerComponent和AdminComponent模块。

Answer 18

许多答案似乎通过在其他（new/custom）模块中导入 CommonModule 来收敛。
在所有情况下仅此步骤是不够的。

完整的解决方案包括两个步骤：

使指令 NgIf、NgFor 等对您的项目可见。
在主要组件中以正确的方式重新组装所有内容 (app.module.ts)

点 1
主模块中的 BrowserModule 似乎足以访问 NgFor。 Angular Documentation 站在这里：.

CommonModule Exports all the basic Angular directives and pipes, such as NgIf, NgForOf, DecimalPipe, and so on. Re-exported by BrowserModule,

另请参阅此处接受的答案：

点 2
唯一需要的更改（在我的例子中）如下：

导入模块OtherModule
导入组件OtherComponent
ng 构建（重要！）
服务

app.module.ts

@NgModule({
    imports: [
        BrowserModule,
        OtherModule
    ],
    declarations: [OtherComponent, AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule {
}

other.html

<div *ngFor='let o of others;'> 
</div>

other.component.ts

@Component({
    selector: 'other-component',
    templateUrl: './other.html'
})
export class OtherComponent {
}

app.module.ts

@NgModule({
    imports: [],
    providers: []
})
export class OtherModule{
}

Answer 19

对于 Angular 10:

将 BrowserModule 添加到路由模块的导入中。
确保您已将不起作用的组件添加到应用程序模块声明中。

不执行第 2 步将触发此错误！

确保重启服务！！！

Answer 20

以防有人在尝试导入后仍然遇到错误 CommonModule，请尝试重新启动服务器。效果惊人

Answer 21

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

添加组件后错误消失了。我希望有比此错误消息更隐晦的内容来指示真正的问题。

Answer 22

可以有任何可能的原因：

您的 module 在 imports[]

CommonModule

您使用 *ngFor 的 component 不属于任何 module。
您可能在 *ngFor 中输入错误，即 **ngFor 或 *ngfor 等
如果一切正常，请重新启动您的应用程序，即 ng serve 或 IDE，即 VS Code、IntelliJ 等

Answer 23

在所有代码中使用正确的语法后，请查看您是否在 angular 模块的声明中提到了您的组件。如下所示：

@NgModule({ 声明：[ 应用组件，你的组件 ],

Answer 24

对我来说，解决问题的方法是 git 克隆我的项目和运行（像往常一样）：

npm install

Answer 25

我遇到了同样的问题，即使我在“”中导入了“BrowserModule”和“CommonModule” module.ts" 它不起作用，我的错误是，没有添加 "NgModule.declarations" 我的组件。

@NgModule ({
   declarations: [
     Your_Component // here
   ]
})

Answer 26

当 ngFor 语法不正确时也会抛出此错误，在我的例子中我有：

<ng-template *ngForOf="let key of SomeObject; index as i">

它通过使用以下语法得到修复：

<ng-template ngFor let-key [ngForOf]="SomeObject" let-i="index">

Answer 27

将组件添加到您的 app.module

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

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

Answer 28

由于 json 数据中的空白 space，我遇到了问题。

Answer 29

就我而言，问题是，我在 *ngFor.

中使用了 const 而不是 let

Answer 30

如果您已经安装了（BrowserModule、CommonModule、FormsModule）它仍然无法正常工作

那么你要做的就是检查模块中是否声明了出错的组件

Answer 31

为了将来参考，我正在对 Angular 12 和运行进行一些单元测试。

我的问题是我正在使用 ng bootstrap 库并测试一种使用 NgbModal.

创建新模态的方法

我收到这些警告是因为我忘记导入由弹出窗口创建的组件。

我不需要导入 FormsModule、CommonModule 或 BrowserModule。

因此，如果您运行遇到这些错误，请确保您尝试为其创建实例的组件已在导入中列出。

Answer 32

聚会有点晚了，但我最近运行遇到了这种情况。回答没有解决我的问题。

我的处所

我正在为项目使用自定义目录结构。有问题的组件位于 components 目录中。
我发现类似错误的组件是使用带有
--skip-import 选项的 CLI 示意图创建的
```
  npx ng g c --skip-import ../components/my-component
```

解决方案

因为我使用了--skip-import（见注释）选项，我发现我的组件没有添加到我的模块中的declarations数组中。将组件添加到相同的解决了问题。

^{注意：嗯，没有这个你不能在app目录外创建组件。}

Answer 33

如果你有模块实现，那么你必须导入组件并在声明中设置组件

祝你编码顺利:)

Answer 34

修改了几个组件后遇到了同样的问题。没有语法错误，所有模块都已导入，但重新启动服务器解决了这个问题。错误发生在一个组件中，该组件是在几十次成功提交之前添加的。

以防其他人遇到同样的问题。

Answer 35

我觉得我的情况比较少见，不过我还是会回答的

我没有任何语法错误，我导入了 BrowserModule，我重述了我的 IDE (VS Code)，但我的模板中仍然有红线，因为我使用了 *ngFor。

我碰巧是因为我使用的是扩展程序，Angular Language Service，但它很旧。更新后，错误不再出现。

Answer 36

就我而言，我已经将 CommonModule 包含在我的共享模块和要使用该组件的功能模块中，但就我而言，我在服务器启动（编译）时保存了一些文件，也许这就是它的原因没有正确注册包含的模块

=> 我重新启动了我的本地服务器，它解决了我的问题

无法绑定到 'ngForOf'，因为它不是 'tr' 的已知属性（最终版本）

Can't bind to 'ngForOf' since it isn't a known property of 'tr' (final release)

angular2-template

angular

无法绑定到 'ngForOf'，因为它不是 'tr' 的已知 属性（最终版本）

Can't bind to 'ngForOf' since it isn't a known property of 'tr' (final release)

angular2-template

angular

无法绑定到 'ngForOf'，因为它不是 'tr' 的已知属性（最终版本）