angular - Cách sử dụng giá trị enum trong TypeScript trong câu lệnh ngSwitch của Angular2

Enum trong Typescript có vẻ là sự kết hợp tự nhiên với directive ngSwitch của Angular2. Nhưng khi tôi cố gắng sử dụng enum trong template của component, tôi nhận được thông báo "Cannot read property 'xxx' of undefined in ...". Làm thế nào tôi có thể sử dụng các giá trị enum trong template của component?

Xin lưu ý rằng điều này khác với cách tạo các tùy chọn html select dựa trên TẤT CẢ các giá trị của một enum (ngFor). Câu hỏi này là về ngSwitch dựa trên một giá trị cụ thể của enum. Mặc dù phương pháp tạo một tham chiếu trong lớp tới enum có vẻ giống nhau.

Câu trả lời #1

Bạn có thể tạo một tham chiếu đến enum trong lớp component của bạn (tôi chỉ thay đổi ký tự đầu tiên thành chữ thường) và sau đó sử dụng tham chiếu đó từ template (plunker):

import {Component} from 'angular2/core';

enum CellType {Text, Placeholder}
class Cell {
  constructor(public text: string, public type: CellType) {}
}
@Component({
  selector: 'my-app',
  template: `
    <div [ngSwitch]="cell.type">
      <div *ngSwitchCase="cellType.Text">
        {{cell.text}}
      </div>
      <div *ngSwitchCase="cellType.Placeholder">
        Placeholder
      </div>
    </div>
    <button (click)="setType(cellType.Text)">Text</button>
    <button (click)="setType(cellType.Placeholder)">Placeholder</button>
  `,
})
export default class AppComponent {

  // Store a reference to the enum
  cellType = CellType;
  public cell: Cell;

  constructor() {
    this.cell = new Cell("Hello", CellType.Text)
  }

  setType(type: CellType) {
    this.cell.type = type;
  }
}

Câu trả lời #2

Điều này đơn giản và hoạt động rất hiệu quả :) chỉ cần khai báo enum của bạn như thế này và bạn có thể sử dụng nó trên mẫu HTML

statusEnum: typeof StatusEnum = StatusEnum;

Câu trả lời #3

Bạn có thể tạo một decorator tùy chỉnh để thêm vào thành phần của bạn để làm cho nó nhận biết các enum.

myenum.enum.ts:

export enum MyEnum {
    FirstValue,
    SecondValue
}

myenumaware.decorator.ts

import { MyEnum } from './myenum.enum';

export function MyEnumAware(constructor: Function) {
    constructor.prototype.MyEnum = MyEnum;
}

enum-aware.component.ts

import { Component } from '@angular2/core';
import { MyEnum } from './myenum.enum';
import { MyEnumAware } from './myenumaware.decorator';

@Component({
  selector: 'enum-aware',
  template: `
    <div [ngSwitch]="myEnumValue">
      <div *ngSwitchCase="MyEnum.FirstValue">
        First Value
      </div>
      <div *ngSwitchCase="MyEnum.SecondValue">
        Second Value
      </div>
    </div>
    <button (click)="toggleValue()">Toggle Value</button>
  `,
})
@MyEnumAware // <---------------!!!
export default class EnumAwareComponent {
  myEnumValue: MyEnum = MyEnum.FirstValue;

  toggleValue() {
    this.myEnumValue = this.myEnumValue === MyEnum.FirstValue
        ? MyEnum.SecondValue : MyEnum.FirstValue;
  }
}

Câu trả lời #4

Angular4 - Sử dụng Enum trong Template HTML ngSwitch/ngSwitchCase

Giải pháp ở đây: https://stackoverflow.com/a/42464835/802196

nguồn: @snorkpete

Trong thành phần của bạn, bạn có

enum MyEnum{
  First,
  Second
}

Sau đó trong component của bạn, bạn đưa kiểu Enum vào thông qua một thành viên 'MyEnum', và tạo một thành viên khác cho biến enum của bạn 'myEnumVar' :

export class MyComponent{
  MyEnum = MyEnum;
  myEnumVar:MyEnum = MyEnum.Second
  ...
}

Bây giờ bạn có thể sử dụng myEnumVar và MyEnum trong mẫu .html của bạn. Ví dụ, sử dụng Enums trong ngSwitch:

<div [ngSwitch]="myEnumVar">
  <div *ngSwitchCase="MyEnum.First"><app-first-component></app-first-component></div>
  <div *ngSwitchCase="MyEnum.Second"><app-second-component></app-second-component></div>
  <div *ngSwitchDefault>MyEnumVar {{myEnumVar}} is not handled.</div>
</div>

Câu trả lời số 5

tính từ rc.6/cuối cùng

...

export enum AdnetNetworkPropSelector {
    CONTENT,
    PACKAGE,
    RESOURCE
}

<div style="height: 100%">
          <div [ngSwitch]="propSelector">
                 <div *ngSwitchCase="adnetNetworkPropSelector.CONTENT">
                      <AdnetNetworkPackageContentProps [setAdnetContentModels]="adnetNetworkPackageContent.selectedAdnetContentModel">
                                    </AdnetNetworkPackageContentProps>
                  </div>
                 <div *ngSwitchCase="adnetNetworkPropSelector.PACKAGE">
                </div>
            </div>              
        </div>


export class AdnetNetwork {       
    private adnetNetworkPropSelector = AdnetNetworkPropSelector;
    private propSelector = AdnetNetworkPropSelector.CONTENT;
}

Câu trả lời số 6

Như một phương án thay thế cho decorator của @Eric Lease, mà thật không may không hoạt động khi sử dụng các bản build --aot (và do đó --prod), tôi đã phải dùng một dịch vụ để hiển thị tất cả các enum của ứng dụng của tôi. Chỉ cần tiêm công khai dịch vụ đó vào mỗi component cần nó, dưới một tên dễ nhớ, sau đó bạn có thể truy cập các enum trong các view của mình. Ví dụ:

Dịch vụ

import { Injectable } from '@angular/core';
import { MyEnumType } from './app.enums';

@Injectable()
export class EnumsService {
  MyEnumType = MyEnumType;
  // ...
}

Đừng quên thêm nó vào danh sách nhà cung cấp của mô-đun của bạn.

Lớp thành phần

export class MyComponent {
  constructor(public enums: EnumsService) {}
  @Input() public someProperty: MyEnumType;

  // ...
}

Thành phần html

<div *ngIf="someProperty === enums.MyEnumType.SomeValue">Match!</div>