Question

角度1.5＆amp;的新功能打字稿

我有一个带有返回数据的服务，一个array- devices.headerEntries：

[{name:id,value:45} ,{name:Mode,value:1},{name:State,value:2},{name:serialnum,value:123434}

我有一个这样的组件

   module my.app {
'use strict';
export enum ModeEnum {
    Unknown = 0,
    Manual,
    Scheduled
}
export enum StateEnum {
  Unknown = 0,
  Playing,
  Paused,
  Stopped
}

@mmw.core.Component('my.app', 'mmwListView', {
    controllerAs: 'vm',
    bindings: {
        device: '<'
    },
    templateUrl: 'app/mydevice/mmw-listview.component.html'
})

class ListViewComponent {
    static $inject = ['$window'];

    constructor(private $window: ng.IWindowService
    ) {
    }

      public device: devices.headerEntries
}

我的观点是这样的

   <md-content>
 <md-list-item class="md-2-line" ng-repeat="hi in vm.device.headerEntries">

      <div class="md-list-item-text">
        <h3> {{hi.name}}</h3>
        <p> {{hi.value}}</p>
      </div>
    </md-list-item>
  </md-list>

我无法弄清楚如何在UI上显示模式，状态等属性的枚举文本值。我应该渲染数据，如[Id，45] [模式，未知] [状态，暂停] [serialnum，1333在UI上

Answer 1

Typescript枚举实际上是一般的JS对象：

enum Foo {
    Bar,
    Baz
}

> Foo[0] = 'Bar'
> Foo[1] = 'Baz'
> Foo['Bar'] = 0
> Foo['Baz'] = 1
> Foo[8] = undefined
> Foo['Something'] = undefined

您可以通过

检索所需的字符串

StateEnum[item.value]

通过过滤器（见下文）或预处理。您可以检查返回值（如果在枚举中找不到值，则为undefined），以保持45和123434等值不变。

过滤器示例：

export class StateFilter {
    constructor() {
        return (value: number) => {
            if (value == null) { return ''; }

            return StateEnum[value] || value;
        };
    }
}

angular
    .module('app')
    .filter('stateFilter', StateFilter);

然后在你的模板中：

<p>{{hi.value | stateFilter}}</p>

有关TS enums here的更多信息！

使用typescript和angular1.5获取视图中的枚举值

1 个答案: