无法在html

Question

我想将html中的枚举类型传递给方法。

export enum ListType {typeOne, typeTwo, typeThree}

现在点击我的按钮我想这样做：

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

这是component.ts中的函数

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

这是我的错误：

  

TypeError：无法读取未定义的属性“length”   [MyTmp @ 62：57中的listToDisplay]

但它起作用了，我该怎么做呢？

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.

}