ngFor无效

Question

我正在使用Angular 4.3.3和JIT编译器,并在运行我的应用程序时得到以下错误:

Property binding ngforOf not used by any directive on an embedded template. 
Make sure that the property name is spelled correctly and all directives are listed in the "@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>

由于我将正确的模块导入正确的位置可能导致此错误？

Answer 1

有时使用时可能会发生

*ngFor="让数据放入dataList">{{data}}

尝试将其更改为

*ngFor="让dataList的数据">{{data}}

您需要将“in”替换为“of”。

Answer 2

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

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

同时binding ngforOf not used表示您使用的是*ngfor代替*ngFor资金F.

Answer 3

有时，当您忘记letfor 时，可能会发生这种情况：

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

它应该是：

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

Answer 4

我发现了问题，我让 webpack 最小化了我的模板。一旦我关闭最小化，它就可以正常工作了。

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

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;
   }