ngFor指令未找到

Question

我正在使用带有JIT编译器的Angular 4.3.3版本，在运行应用程序时出现以下错误：

属性绑定 ngforOf 在嵌入式模板中未被任何指令使用。 确保正确拼写属性名称，并在@NgModule.declarations中列出所有指令。

我已经确认在我的主应用程序模块中导入了 BrowserModule，并在引起此错误的子模块中导入了 CommonModule。

这是抛出错误的模板：

<div class="background"></div>
<div class="content normal-page">
    <ons-fab position="top right" ripple>+</ons-fab>
    <ons-list>
        <ons-list-item *ngFor="let item of items; let i = index">
            <div class="center">
                #{{i}} msg: {{item.msg}}
            </div>
        </ons-list-item>
    </ons-list>
</div>

我已经将正确的模块导入到正确的位置，那么是什么导致了这个错误？

- Graham

Answer 1

包含您的组件的 NgModule 需要在 imports 中拥有 CommonModule

@NgModule({
  ...,
  imports: [CommonModule],
})
export class MySharedModule {}

同时，binding ngforOf not used 表示您正在使用小写的 *ngfor 而不是大写的 *ngFor。

- Günter Zöchbauer

---

你确定你的代码中没有使用 *ngfor 而是 *ngFor（第一个字母大写的 F）吗？ - Günter Zöchbauer

我找到了问题，看看我的答案。这是一个webpack的问题。不过还是谢谢你的帮助。 - Graham

我看到了，这就解释了为什么所有字母都变成小写了。 - Günter Zöchbauer

我明白了。抱歉，看起来我不小心跳过了那一行。 - Günter Zöchbauer

Answer 2

有时候在 for 循环中可能会忘记写上 let，导致出现如下错误：

<span *ngFor="teacher of teachers">{{teacher}}</span>

并且它应该是：

<span *ngFor="let teacher of teachers">{{teacher}}</span>

- PhoneixS

---

这只是我的笔误，甚至没有意识到，谢谢！ - Laszlo Sarvold

Answer 3

有时候你使用

*ngFor="let data in dataList">{{data}}

可能会出现问题，尝试将其更改为

*ngFor="let data of dataList">{{data}}

你需要将 'in' 替换为 'of'。

- soni kumari

---

原来这是我的错误。 - Miebaka

Answer 4

我找到了问题所在，是因为webpack对我的模板文件进行了最小化处理。一旦关闭了最小化选项，就可以正常工作了。

{
    test: /\.html$/,
    use: [
        {
            loader: 'html-loader',
            options: {
                minimize: false
            }
        }
    ]
}

- Graham

---

但是我应该在哪里更新上面的最小化选项，请告诉我文件名。 - Nagnath Mungade

Answer 5

如果您正在使用Angular 14或15的独立组件，您可以将CommonModule导入到您的组件中，或者解构并获取NgForOf：

import {Component} from '@angular/core'
import {Link} from "./link";
import {Container} from "./container";
import {menu} from "../../db/db";
import {NgFor, NgForOf} from "@angular/common";
@Component({
  selector: 'navigation',
  template: `
    <nav class="bg-white border-b border-gray-100">
      <container>
       <ul class="flex space-x-5">
            <li *ngFor="let link of menu">
            <nav-link href="">{{link.name}}</nav-link>
            </li>
        </ul>
      </container>
    </nav>
  `,
  standalone: true,
  imports: [
      Link, 
      Container, 
      NgForOf
      ],
   }) export class Navigation { 
      menu = menu;
   }

- Abel Chipepe

---

你知道为什么我不能将CommonModule导入到BootstrapApplication(RootCmp，{importProvidersFrom(CommonModule)})中吗？你提供的示例和你的示例之间有什么区别，而你的示例对我有效？ - ezhupa99

Answer 6

在Ionic 6中，我需要在我的主页中添加CommonModule：

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

@Component({
  selector: 'app-home',
...
  imports: [CommonModule]
})
export class HomePage implements OnInit {

我正在使用空白模板。如果你正在使用带有模块的页面，你需要在页面模块中添加CommonModule。

- danilo

Answer 7

我的问题是我写成了“作为”而不是“的”。

let o of options

基本上，任何语法错误，比如缺少let关键字、未将ngFor首字母大写或者使用了错误的'as'关键字，都可能导致这个问题。

- Aditya Mittal

Answer 8

您还需要确保您正在处理的组件在您的module.ts文件中声明。

例如，在使用*ngFor:的组件中：

@Component({
  ...
  template: '<div *ngFor="let thing of things">..</div>'
})
export class MyComponent {...

这个组件还必须在你的 module.ts 文件 中声明：

@NgModule({
  ...
  declarations: [
    MyComponent
  ]

我使用了一个VS Code扩展，它可以为我创建组件，但是没有在应用程序模块中注册它们，而我经常忘记手动注册，导致出现这个问题。

- Chris W

Answer 9

在 app.module.ts 中添加：

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

@NgModule({
    imports: [
        CommonModule,
    ],


})
export class AppModule { }

- Fahimeh Ahmadi