* ngFor在导入组件中使用时不起作用

Error 我得到了：

无法绑定到'ngforOf'，因为它不是'div'的已知属性 . （“] * ngfor =”让项目[1,2,3]“> {}”）

描述：

我遇到了一个奇怪的问题，我试图在我的应用程序中使用* ngFor，但它无法在任何可能的组合中使用 . 我尝试使用BrowserModule，CommonModule . 都失败了 . 任何想法，为什么我不能让这个工作？

nav.component.ts

import {OnInit, Component} from '@angular/core';

@Component({
    selector: 'global-nav',
    template: `
        <div *ngFor="let item of [1, 2, 3]">
            {{item}}
        </div>
    `
})

export class NavComponent implements OnInit {

    private navigation;

    constructor() {
        this.navigation = 
        [
            {
                "href": "#homepage",
                "label": "Homepage"
            }
        ]
    }
    ngOnInit() {

    }
}

app.module.ts

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { CommonModule } from '@angular/common';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule, Routes } from '@angular/router';

import { AppComponent } from './app.component';

import { NavComponent } from './components/global/nav/nav.component';
import { MainComponent } from './components/main/main.component';

const appRoutes: Routes = [
  {
    path: '',
    component: MainComponent,
    data: { title: 'Homepage' }
  },
  {
    path: '**',
    redirectTo: '',
    pathMatch: 'full'
  }
];

@NgModule({
  declarations: [
    AppComponent,
    NavComponent,
    MainComponent
  ],
  imports: [
    RouterModule.forRoot(
      appRoutes
    ),
    BrowserModule
  ],
  providers: [],
  schemas: [ CUSTOM_ELEMENTS_SCHEMA ],
  bootstrap: [ AppComponent ]
})
export class AppModule {}

app.component.ts

不需要它只用于设置 Headers 的代码 .

的package.json

{
  "name": "",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack -p",
    "watch": "webpack -p -w"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@types/core-js": "^0.9.42",
    "@types/node": "^8.0.12",
    "babel-core": "^6.25.0",
    "babel-loader": "^7.1.1",
    "babel-preset-env": "^1.6.0",
    "copy-webpack-plugin": "^4.0.1",
    "css-loader": "^0.28.4",
    "file-loader": "^0.11.2",
    "html-loader": "^0.5.1",
    "node-sass": "^4.5.3",
    "postcss-loader": "^2.0.6",
    "precss": "^2.0.0",
    "progress-bar-webpack-plugin": "^1.9.3",
    "pug": "^2.0.0-rc.3",
    "pug-html-loader": "^1.1.5",
    "pug-loader": "^2.3.0",
    "raw-loader": "^0.5.1",
    "sass-loader": "^6.0.6",
    "style-loader": "^0.18.2",
    "ts-loader": "^2.2.2",
    "typescript": "^2.4.1",
    "url-loader": "^0.5.9",
    "webpack": "^3.0.0"
  },
  "dependencies": {
    "@angular/common": "^4.3.6",
    "@angular/compiler": "^4.3.6",
    "@angular/core": "^4.3.6",
    "@angular/forms": "^4.3.6",
    "@angular/http": "^4.3.6",
    "@angular/platform-browser": "^4.3.6",
    "@angular/platform-browser-dynamic": "^4.3.6",
    "@angular/router": "^4.3.6",
    "core-js": "^2.5.1",
    "rxjs": "^5.4.3",
    "zone.js": "^0.8.17"
  }
}

我的想法已经用完了，我找不到任何相关的东西 . 也许有人在这里可以帮助我 .

固定：

Webpack将我的模板变成小写 . 所以我的所有* ngFor都成了* ngfor

• ngFor在导入的组件中使用时不起作用