Angular2 - 无法绑定到'ngSwitchCase',因为它不是已知的本机属性

Question

我在我的.html文件中有两个列表.我试图让我的代码不重复所以我决定使用ngSwitch,但是当我做下一件事时我得到一个错误:

<div [ngSwitch]="currentListView">
    <div *ngSwitchCase="'People'">
      <div dnd-sortable-container [dropZones]="['zone-one']" [sortableData]="listOfPeople">
        <div class="list-bg" *ngFor="#person of listOfPeople; #i = index" dnd-sortable [sortableIndex]="i">
          ID: {{bulk.person}} <p></p> Name: {{person.name}}
        </div>
      </div>
    </div>
    <div *ngSwitchCase="'Cars'">
      <div dnd-sortable-container [dropZones]="['zone-one']" [sortableData]="listOfCars">
        <div class="list-bg" *ngFor="#car of listOfCars; #i = index" dnd-sortable [sortableIndex]="i">
          ID: {{car.id}} <p></p> Color: {{car.color}}
        </div>
      </div>
    </div>

这是ECH列表的错误:

(承诺中):模板解析错误:无法绑定到'ngSwitchCase',因为它不是已知的本机属性("

<div [ngSwitch]="currentListView">
    <div [ERROR ->]*ngSwitchCase="'People'">
      <div dnd-sortable-container [dropZones]="['zone-one']" [sortableData"): AppCmp@42:9
Property binding ngSwitchCase not used by any directive on an embedded template ("

  <div [ngSwitch]="currentListView">
    [ERROR ->]<div *ngSwitchCase="'People'">
      <div dnd-sortable-container [dropZones]="['zone-one']" [sortabl"): AppCmp@42:4
Can't bind to 'ngSwitchCase' since it isn't a known native property ("
      </div>
    </div>

这有什么不对？我可以让它更有效率吗？

谢谢

Answer 1

如果你使用Angular2的公共元素(ngSwitch,ngIf,ngFor,...),你必须CommonModule在你的应用程序中导入.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, ApplicationRef } from '@angular/core';
import { CommonModule } from '@angular/common';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    CommonModule
  ],
  providers: [],
  entryComponents: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule {

}