Angular2 - “无法绑定到‘ngSwitchWhen’，因为它不是‘模板’的已知属性。”

我收到以下错误“无法绑定到‘ngSwitchWhen’，因为它不是‘模板’的已知属性。”我读过不同的主题，建议添加

从 '@angular/common' 导入 { CommonModule }

并将“CommonModule”添加到@NgModel的导入部分，我这样做了，但这并没有解决问题。我不知道我做错了什么，有什么帮助可以解决这个问题吗？

这是我的“app.component.ts”代码

import { Component } from '@angular/core'

@Component({
  selector: 'app-root',
  template: `
     <ul class="nav nav-pills">
        <li [class.active]="viewMode == 'map'"><a (click)="viewMode = 'map'">Map View</a></li>
        <li [class.active]="viewMode == 'list'"><a (click)="viewMode = 'list'">List View</a></li>
     </ul>
     <div [ngSwitch]="viewMode">
     <template [ngSwitchWhen]="'map'" ngSwitchDefault>Map View Content></template>
     <template [ngSwitchWhen]="'list'">List View Content</template>
     </div>
    `
})

export class AppComponent {
  viewMode = 'map';
} 

这是“app.module.ts”的代码

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, ApplicationRef } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { CommonModule } from '@angular/common';

import { AppComponent } from './app.component';
import { FavoriteComponent } from './favorite.component';
import { HeartComponent } from './heart.component';
import { VoteComponent } from './vote.component';
import { TweetComponent } from './tweet.component';

@NgModule({
  declarations: [
    AppComponent,
    FavoriteComponent,
    HeartComponent,
    VoteComponent,
    TweetComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    CommonModule
  ],
  providers: [],
  entryComponents: [AppComponent],
  bootstrap: [AppComponent]
})

export class AppModule {

}

它应该是ngSwitchCase代替ngSwitchWhen

https://angular.io/docs/ts/latest/api/common/index/NgSwitchCase-directive.html https://angular.io/docs/ts/latest/api/common/index/NgSwitchCase-directive.html