cantが正しくhtmlで列挙型を渡します

Question

私はhtmlのenum型をメソッドに渡したいと思います。私のボタンで、今

export enum ListType {typeOne, typeTwo, typeThree} 

私はこれをしたいクリックしてください：これは

public setListToDisplay(type: ListType):void { 
    switch (type) { 
     case ListType.matcherView: 
     this.listToDisplay = this.listOneToDisplay; 
     case ListType.expediteView: 
     this.listToDisplay = this.listTwoToDisplay; 
     case ListType.typeThree: 
     this.listToDisplay = this.listThToDisplay; 
    } 
    } 

component.ts内の関数である

<button md-button 
      (click)="setListToDisplay(ListType.typeOne)" 
      class="md-primary">Matcher 
    </button 

これは私のエラーです：

TypeError: Cannot read property 'length' of undefined in [listToDisplay in MyCmp@62:57]

しかし、それは仕事量です、どうすればいいですか？それは適切ですか？

Answer 1

@Componentデコレートされたクラスの中で、テンプレートで列挙型を参照できるようにする必要があります。

あなたは以下のようなテンプレート/コードがある場合は示したように、プロパティを追加します。

import { stuff } from 'whatever'; 
... 

export enum ListType {typeOne, typeTwo, typeThree} 

@Component({ 
    selector: 'my-component', 
    template: ` 
    ... 
    <button md-button 
      (click)="setListToDisplay(ListType.typeOne)" 
      class="md-primary">Matcher 
    </button> 
    ... 
    ` 
    ... 
}) 
export class MyComponent { 

    public setListToDisplay(type: ListType):void { 
    switch (type) { 
     case ListType.matcherView: 
     this.listToDisplay = this.listOneToDisplay; 
     case ListType.expediteView: 
     this.listToDisplay = this.listTwoToDisplay; 
     case ListType.typeThree: 
     this.listToDisplay = this.listThToDisplay; 
    } 
    } 

    // add a property with the enum name, like this: 
    public ListType = ListType; // <<<-------------------------------- add this property 

    // with the above you can now use the ListType.typeOne in the template. 

}