kann enum type nicht richtig in html

Question

übergeben Ich möchte einen Enum-Typ in meinem HTML zu einer Methode übergeben.

export enum ListType {typeOne, typeTwo, typeThree} 

jetzt in meiner Schaltfläche klicken ich dies tun wollen:

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

dies die Funktion in den component.ts

ist

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; 
    } 
    } 

dies mein Fehler ist:

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

aber es dosent Arbeit, wie soll ich tun es richtig?

Answer 1

Sie müssen eine Eigenschaft erstellen innerhalb die @Component -decorated-Klasse für Sie in der Lage sein, die Enumeration in der Vorlage verweisen.

Also, wenn Sie eine Vorlage/Code, ähnlich dem unten haben, fügen Sie die Eigenschaft wie gezeigt:

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. 

}