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

【问题标题】：Can't bind to 'ngForOf' since it isn't a known property of 'tr' (final release)无法绑定到“ngForOf”，因为它不是“tr”的已知属性（最终版本）
【发布时间】：2017-03-12 21:48:28
【问题描述】：

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

【问题讨论】：

确保你没有打错字 ngfor 给出了你提到的错误。应该是ngFor
angular 也区分大小写。
刚刚在这个错误上丢失了大约 1 小时，仅在一个特定页面上。在这里尝试了所有的答案，但最终的解决方案是用ng重建整个东西，问题就消失了......
有时是因为 IDE 中的插件失败（VS Code、Web Storm）。在这里查看我的答案：stackoverflow.com/a/70368326/4079915

标签： angular angular2-template

【解决方案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 */],
  ..
})

【讨论】：

是的，我有多个模块。我忘记了这个。它现在可以工作了：）谢谢你
可能值得一提的是，CommonModule 位于 '@angular/common'，所以你必须确保添加 import {CommonModule} from '@angular/common'
我有类似的问题。我的应用有多个模块，需要在应用模块和另一个模块中添加导入浏览器模块语句。
有时它可能是一个简单的错字，在执行“*ngFor="让乘客或乘客”时会发生同样的错误
在新版本的 Angular 中，BrowserModule 是 @angular/platform-browser 的一部分。因此，您必须导入为：import { BrowserModule } from '@angular/platform-browser'

【解决方案2】：

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

【讨论】：

添加 CommonModule 对我有用请改进您的答案。也分享步骤
谢谢，原来如此。我想补充一点，我必须重新启动服务器
还要确保您的自定义模块在声明括号中

【解决方案3】：

您必须在使用这些内置指令的模块中导入CommonModule，例如ngFor、ngIf 等。

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

【讨论】：

你说在组件中导入它，然后显示将它导入模块的代码
你是对的。一些指令，包括 ngfor，都在这个模块中。
为我工作。 :)

【解决方案4】：

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

【讨论】：

好吧，这可能会让我陷入困境；）
类似：我写了*ngFor="let diagram if diagrams"，注意if。 “解析错误”消息会更好......
@klenium，你拯救了我的一天！我在使用 *ngFor="lang in languages" 时遇到了这个错误，其中 angular 8 需要 *ngFor="let lang of languages"。非常具有误导性的错误消息imo：/
我收到此错误是因为我将“let”大写。

【解决方案5】：

要记住的事情：

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

yourmodule.module.ts

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

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

【讨论】：

你知道为什么即使在我的子/自定义模块类上有 commonModule 之后，我还是会在 chrome 中收到该错误/警告？

【解决方案6】：

自定义模块需要通用模块

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


@NgModule({
  imports: [
    CommonModule
  ]
})

【讨论】：

【解决方案7】：

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

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

【讨论】：

【解决方案8】：

我遇到了同样的错误，但是 我已经导入了 CommonModule。相反，我在拆分模块时因为复制/粘贴而留下了一个逗号：

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

【讨论】：

【解决方案9】：

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

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

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

【讨论】：

【解决方案10】：

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

如果你没有任何嵌套模块

一个。将 CommonModule 导入您的 App 模块

b.在 App Module 中添加 *ngFor 的位置导入您的组件，在 declarations
中定义

// 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]
})

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

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

【讨论】：

确实，我忘记在我的模块中声明组件了。

【解决方案11】：

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

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

@NgModule({
  imports: [
    CommonModule
]})

它会解决你的错误。

【讨论】：

【解决方案12】：

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

文件：app.module.ts

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

@NgModule({
  imports: [
    HouseModule
  ]
})

【讨论】：

刚刚花了 1 个多小时寻找这个解决方案。谢谢大佬！
还可以考虑重新启动“ng serve”，因为有时无法正确获取新的代码添加。

【解决方案13】：

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

*ngFor="let ingredient of ingredients"

**ngFor="let ingredient of ingredients"

【讨论】：

是的，VS Code 似乎自动放了两颗星而不是一颗。

【解决方案14】：

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

在我的情况下，AppModule 不包括该特定模块。奇怪的是它并没有抱怨这一点，但这可能与 Ivy 与ng serve 的工作方式有关（根据路由加载模块，但不考虑其依赖关系）。

【讨论】：

【解决方案15】：

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

feature.routing.module.ts：

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

feature.module.ts：

     imports: [ FeatureRoutingModule ],
     declarations: [],

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

【讨论】：

谢谢，这不是我的问题，但它给了我一个提示和宾果游戏，我的问题解决了！！
非常感谢！这解决了我的问题
这解决了我的问题并节省了我很多时间:)

【解决方案16】：

未来的读者

检查以下各项：

组件在 SINGLE 角度模块中声明
确保您拥有import { CommonModule } from '@angular/common';
重新启动 IDE/编辑器
重启开发服务器 (ng serve)

【讨论】：

仅添加 CommonModule 并不能解决问题，还需要重新启动 Intelij IDE。
还可以考虑重新启动“ng serve”，因为有时无法正确获取新的代码添加。
重启服务器帮了我

【解决方案17】：

所以请确保

指令中没有语法错误
Browser (in App Module) 和 Common (in other/child) 模块被导入（与上面提到的Günter Zöchbauer 相同）
如果您在应用程序中有路由，则应在 App 模块中导入路由模块
所有路由组件的Module也会导入到App Module中，例如： app-routing.module.ts 如下：

常量路由：Routes = [

{路径：''，组件：客户组件}，

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

];

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

【讨论】：

【解决方案18】：

通过在其他（新/自定义）模块中导入 CommonModule 似乎可以收敛很多答案。
在所有情况下，仅此步骤是不够的。

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

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

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

CommonModule 导出所有基本的 Angular 指令和管道，例如 NgIf、NgForOf、DecimalPipe 等。由 BrowserModule 重新导出，

另请参阅此处接受的答案：CommonModule vs BrowserModule in angular

第 2 点
唯一需要的更改（在我的情况下）如下：

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

app.module.ts

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

其他.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{
}

【讨论】：

这帮助我找出了问题所在。我错过了 app.module.ts 中的声明。现在它起作用了。谢谢！

【解决方案19】：

对于 Angular 10：

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

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

确保重启服务！！！

【讨论】：

【解决方案20】：

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

【讨论】：

第一次。如果我保存，那么编译器会重新加载，问题仍然存在

【解决方案21】：

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

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

【讨论】：

哦，谢谢，我在现有的 .ts 文件中创建了一个附加组件，但忘记注册它，因为在我收到此错误之前一切正常。
我不小心把我的组件放在了 providers: [] 部分。掌心

【解决方案22】：

可能有任何原因：

您的module 在imports[] 中没有CommonModule
您使用 *ngFor 的 component 不是任何 module 的一部分。
您可能在*ngFor 中有错字，即**ngFor 或*ngfor 等。
如果一切正常，请重新启动您的 IDE，即 VS Code、IntelliJ 等。

【讨论】：

您的模块在导入 [] 中没有 CommonModule，对我有用，因为我没有在我的 productmodule 文件中添加 commonmodule
好极了。忘记在声明数组中添加组件。
这就是答案，它涵盖了问题的所有可能原因。对我来说没有工作。 2. 谢谢！
重新启动 VS 代码或停止 npm start 并重新启动它对我有用。

【解决方案23】：

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

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

【讨论】：

【解决方案24】：

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

npm install

【讨论】：

【解决方案25】：

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

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

【讨论】：

【解决方案26】：

当ngFor 语法编写不正确时，也可能引发此错误，在我的情况下，我有：

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

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

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

【讨论】：

【解决方案27】：

将组件添加到您的 app.module

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

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

【讨论】：

【解决方案28】：

由于 json 数据中有空格，我遇到了问题。

【讨论】：

【解决方案29】：

就我而言，问题是我在*ngFor 中使用了const 而不是let。

【讨论】：

【解决方案30】：

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

那么你要做的就是检查有错误的组件是否在模块中声明

【讨论】：