Within my application, I have implemented three buttons that each display a different list. To control which list is presented using Angular's ngSwitch, I decided to incorporate enums. However, I encountered an error in the process.
The TypeScript code snippet looks like this:
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;
});
}
}
This is the HTML code section:
<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>
I'm encountering difficulty with this setup. Can anyone point out where I am going wrong?
The specific error message reads as follows:
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">
I am utilizing Typescript and Angular2 for this project.