无法使用ngSwitch正确使用枚举

jac*_*iao 3 javascript enums angularjs typescript angular

我有三个按钮,显示三个不同的列表,所以我想添加enums来帮助我决定使用哪个列表ngSwitch,但是我收到了一个错误.

这是TypeScript:

export enum ListType {People, Cars}

export class AppCmp implements OnInit {

    listOfPeople: Person[];
    listOfCars: Car[];

    currentListView: CurrentListView;

    constructor(private _MyService: MyService) {
    };


    public setListType(type: ListType) {
        this.listType = type;
    }

    ngOnInit() {
      this._MyService.getListOfPeopleData().subscribe(res => {
        this.listOfPeople = res;
      });

      this._MyService.getListOfCarsData().subscribe(res => {
        this.listOfCars = res;
      });
    }
}
Run Code Online (Sandbox Code Playgroud)

这是HTML:

<div>
  <button md-button
          (click)="setListType(listType.People)"
          class="md-primary">People
  </button>

  <button md-button
          (click)="setListType(listType.Cars)"
          class="md-primary">Cars
  </button>
</div>


<md-content>

  <h1 align="center">{{title}}</h1>

  <div [ngSwitch]="currentListView">

    <div *ngSwitchCase="listType.People">
        <div class="list-bg" *ngFor="#person of listOfPeople">
          ID: {{person.id}} <p></p> name:{{person.name}}
        </div>
      </div>
    </div>
    <div *ngSwitchCase="listType.Cars">
        <div class="list-bg" *ngFor="#car of listOfCars;>
          ID: {{car.id}} <p></p> color: {{car.color}}
        </div>
    </div>

  </div>

</md-content>
Run Code Online (Sandbox Code Playgroud)

我在这做错了什么?

错误是:

EXCEPTION: Error: Uncaught (in promise): Template parse errors: Can't
bind to 'ngSwitchCase' since it isn't a known native property ("  
  <div [ngSwitch]="currentListView">

     <div [ERROR ->]*ngSwitchCase="listType.People"> Property binding ngSwitchCase not used
by any directive on an embedded template ("  
  <div [ngSwitch]="currentListView">
Run Code Online (Sandbox Code Playgroud)

我正在使用Typescript和Angular2.

acd*_*ior 16

考虑到enum:

export enum ListType {People, Cars}
Run Code Online (Sandbox Code Playgroud)

如果要在模板中使用它,例如:

...
<div *ngSwitchCase="listType.People">
...
Run Code Online (Sandbox Code Playgroud)

您必须通过在类中创建一个属性来使组件可用于枚举,该属性将充当"别名"(在该模板中)enum,如下所示:

export class AppCmp implements OnInit {

  public listType = ListType;  // <-- a prop with the name you want to use for the enum
...
Run Code Online (Sandbox Code Playgroud)