Angular 2 - ngIf、ngFor 等常见指令不起作用答案

【问题标题】：Angular 2 - Common directives like ngIf, ngFor not workingAngular 2 - ngIf、ngFor 等常见指令不起作用
【发布时间】：2016-10-23 07:40:30
【问题描述】：

我刚开始学习 Angular 2，我一直坚持制定通用指令才能工作。我在使用 Angular 版本 2.1.1 并且收到错误 Can't bind to 'ngforOf' since it isn't a known property of 'li'. 同样适用于 *ngIf 和其他指令。

我从类似问题中读到的一些最相关的提示：

1. 确保视图中的指令是use the correct spelling and casing，比如ng-if应该是*ngIf等。
1. 在根模块中导入BrowserModule，在要使用通用指令的其他模块中导入CommonModule。 Link

到目前为止，以下是我实现这些修复建议的部分代码：

approot.module.ts

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpModule, RequestOptions } from '@angular/http';
import { AuthRequestOptions } from '../services/auth.request.options';

import { AppComponent } from '../approot/approot.component';
import { AppRoutingModule } from './approot.routing.module';

import { DashboardModule } from '../dashboard/dashboard.module';

@NgModule({
  imports: [
    BrowserModule,
    HttpModule,
    AppRoutingModule,
    DashboardModule
  ],
  declarations: [
    AppComponent
  ],
  providers: [
    {provide: RequestOptions, useClass: AuthRequestOptions}
  ],
  bootstrap: [ AppComponent ]
})

export class AppModule { }

dashboard.module.ts

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

import { DashboardRoutingModule } from './dashboard.routing.module';
import { DashboardComponent } from './dashboard.component';
import { DashboardHomeComponent } from './dashboard-home.component';

@NgModule({
  imports: [
    CommonModule,
    DashboardRoutingModule,
  ],
  declarations: [
    DashboardComponent,
    DashboardHomeComponent
  ],
})

export class DashboardModule { }

dashboard.component.ts（我想在这里使用*ngFor）

import {Component} from "@angular/core";
import {ListService} from "../services/list.service";
import {ListModel} from "../models/list.model";

@Component({
  templateUrl: '/views/dashboard/views/dashboard.html',
  providers: [
    ListService
  ],
  styleUrls: ['../css/dashboard/styles/dashboard.css']
})

export class DashboardComponent {

  lists: Array<ListModel>;

  constructor (private listService: ListService) {
    this.lists = [];
  }

  ngOnInit () {
    console.log(this.lists);
    this.listService.getLists().subscribe(
      (data) => {
        this.lists = data;
        console.log(this.lists);
      }
    );
  }
}

编辑仪表盘.html

<div class="row">
  <div class="col-sm-3 col-md-2 sidebar">
    <ul class="nav nav-sidebar">
      <li class="active">
        <a>My Lists</a>
      </li>

      <li *ngFor="let list of lists">
        <a href="#">{{list.name}}</a>
      </li>

    </ul>
  </div>
  <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
    <router-outlet></router-outlet>
  </div>
</div>

我还尝试在dashboard.module.ts 中导入BrowserModule 而不是CommonModule，但仍然没有成功。

我了解到，以前的 angular2 beta 版本在 @Component() 中有 directive 属性，并且应该在那里声明指令以便可以解析它们。这在当前版本的 Angular 中已被弃用，我想知道这是否与此错误有关，Angular 无法识别常用指令。

非常感谢任何帮助。

【问题讨论】：

请也添加仪表板 html。
我猜应该是*ngFor= 而不是*ngfor=。区分大小写
添加了dashboard.html @SefaÜmitOray
我的列表

{{list.name}}

路由器出口>
我用*ngFor=@yurzui
你的错误是Can't bind to 'ngforOf' 如果你使用*ngFor 那么它将是ngForOf

标签： angular angular2-template angular2-directives

【解决方案1】：

好吧，我错了。抱歉打扰各位了。我正在使用gulp-htmlmin 插件，它修改了我的模板的内容。我只需要将{caseSensitive: true} 添加到gulp-htmlmin 选项以允许自定义元素属性。感谢大家的努力。

【讨论】：