Angular2 - "Can't bind to 'ngSwitchWhen' since it isn't a known property of 'template'."

Angular2 - "Can't bind to 'ngSwitchWhen' since it isn't a known property of 'template'."

我收到以下错误 "Can't bind to 'ngSwitchWhen' since it isn't a known property of 'template'." 我阅读了建议添加的不同主题

import { CommonModule } from '@angular/common'

并将 "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