*ngFor 不能绑定到“ngForOf”，因为它不是“div”的已知属性。

Question

我已经使用 NGFor 很长时间了，但似乎突然在这个新应用程序中我得到了

无法绑定到“ngForOf”，因为它不是“div”的已知属性。

在线查找时显示的是旧版本的 Angular，这很奇怪。 同样，它告诉我在导入中添加 BrowserModule，这通常是正常的。 我目前正在开发一个带有路由的应用程序，因此该应用程序使用 RouterModule 来获取正确的页面。 在 App 模块中，我将它与 BrowserModule 一起作为导入。

编辑我最终在我的基本页面中做了一个 *ngFor 循环，所以它似乎工作。 我在想问题是从路线的概念上发生的？ 我通过以下方式在我的 RouterModule 中访问它：

{path: 'industry/manufacturing', component: ManufacturingComponent},

通过路由访问是否需要我将 CommonModule 添加到 RouterModule？

我的 Angular 规格是：

Angular CLI: 10.0.8
Node: 14.12.0
OS: darwin x64

Angular: 10.0.14
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router
Ivy Workspace: Yes

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.1000.8
@angular-devkit/build-angular     0.1000.8
@angular-devkit/build-optimizer   0.1000.8
@angular-devkit/build-webpack     0.1000.8
@angular-devkit/core              10.0.8
@angular-devkit/schematics        10.0.8
@angular/cdk                      8.2.3
@angular/cli                      10.0.8
@angular/material                 8.2.3
@ngtools/webpack                  10.0.8
@schematics/angular               10.0.8
@schematics/update                0.1000.8
rxjs                              6.5.5
typescript                        3.9.7
webpack                           4.43.0

<div *ngFor="let mat of materials">
  {{mat.name}}: {{mat.quantity}}
</div>

在 ts 代码中，我将其定义为：

materials = [{"name": "foo", "quantity": 5}];

我的 app.module 看起来像：

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

AppRoutingModule 也很简单：

const routes: Routes = [
  {path: '', component: MainComponent},
  {path: 'industry/manufacturing', component: ManufacturingComponent},
  {path: '**', component: PageNotFoundComponent}
];
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

我不确定这里发生了什么不寻常的事情。

Answer 1

我认为您在导入时缺少CommonModule的导入，除非它在其他我看不到的地方声明。 编辑：您的应用程序模块有 BrowserModule 包含它，但它不知道您的组件，将CommonModule添加到您的RoutingModule （不推荐，它不是处理谁拥有什么的路由器工作），或者在您的AppModule中声明组件让他知道哪些组件使用他的进口。 有关路由和模块的广泛示例，请参阅https://stackblitz.com/angular/qypdxgpopxp?file=src%2Fapp%2Fadmin%2Fadmin.module.ts

Answer 2

试试这些步骤看看。

1. 导入 Commons 模块
2. 重新运行服务
3. 执行 npm 安装
4. 尝试转到您放置 *ngFor 的模板的 .ts 文件并重新保存 .ts 文件。 我发现这解决了我的很多模板相关问题