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)
| 归档时间: |
|
| 查看次数: |
1768 次 |
| 最近记录: |