如何在枚举中使用ng-if条件？ （angular2 /打字稿）

Question

我有一个视图，在这种视图中3个按钮：

showListOne() 

showListTwo() 

showListThree() 

被点击时各该按钮i的要呈现不同的列表中，在相同的视图，但不能在同一时间（一次只能显示一个列表，如标签行为）。

所以我想用枚举做，这是多么：

出口枚举CurrentListView {人，车，地方}

@Component({ 
    selector: 'my-app', 
    styles: [require('./my-app.css')], 
    directives: [DND_DIRECTIVES], 
    providers: [DND_PROVIDERS], 
    template: require('./my-app.component.html') 
}) 

    @Injectable() 
    export class AppCmp implements OnInit { 

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

    currentListView: CurrentListView; 

    constructor(private _MyService: MyService) { 
    }; 

    public showListOfPeopleData(): void { 
     this.currentListView = CurrentListView.People; 
    } 

    public showListOfCarsData(): void { 
     this.currentListView = CurrentListView.Cars; 
    } 

    public showListOfPlacesData(): void { 
     this.currentListView = CurrentListView.Places; 
    } 

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

     this._MyService.getListOfCarsData().subscribe(res => { 
     this.listOfCars = res; 
     }); 

     this._MyService.getListOfPlacesData().subscribe(res => { 
     this.listOfPlaces = res; 
     }); 
    } 
    } 

现在，我如何使用NG-如果要问什么是currentListView的状态？这是我的视图（NG-如果有什么我想它dosent工作）：

<div *ngIf="currentListView == CurrentListView.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: {{person.id}} <p></p> Age: {{person.age}} 
     </div> 
    </div> 
    </div> 

<div *ngIf="currentListView == CurrentListView.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> 

<div *ngIf="currentListView == CurrentListView.Places"> 
    <div dnd-sortable-container [dropZones]="['zone-one']" [sortableData]="listOfPlaces"> 
     <div class="list-bg" *ngFor="#place of listOfPlaces; #i = index" dnd-sortable [sortableIndex]="i"> 
     City: {{place.city}} <p></p> Capacity: {{place.capacity}} 
     </div> 
    </div> 
    </div> 

而且可以在我的打字稿或HTML可能会更有效率？我很想看到一个更通用的方式来做这个没有重复的建议..

谢谢分配！

Answer 1

我不认为你可以比较阵列（不​​要管它是坏的表现）， 我建议，而不是你可以在某些字符串变量 像这样保存“名单，待显示”：

currentListView:string = 'Bikes'; 

想在这个plunkr