Angular 2 -常见指令，比如ngIf、ngFor不能工作

Question

我刚开始学习Angular 2，我还在纠结如何让通用指令正常工作。我是在Angular版本2.1.1，我收到错误Can't bind to 'ngforOf' since it isn't a known property of 'li'.同样的*ngIf和其他指令。

我在这里从类似的问题中读到一些最相关的技巧:

• 1. 确保在视图中使用正确的拼写和大小写指令，例如ng-if应该是*ngIf，等等。
• 在根模块中导入BrowserModule，在其他需要使用通用指令的模块中导入CommonModule。链接

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

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

编辑dashboard.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测试版在@Component()中有directive属性，指令应该在那里声明，这样它们就可以被解析。这在当前版本的angular中已经被弃用了，我想知道这是否与这个错误有关，angular不能识别通用指令。

Answer 1

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