Як використовувати значення enum typecript в операторі Angular2 ngSwitch

Перерахунок Typescript здається природним збігом із директивою ngSwitch Angular2. Але коли я намагаюся використовувати enum у шаблоні мого компонента, я отримую "Неможливо прочитати властивість 'xxx' undefined in ...". Як я можу використовувати значення enum у своєму шаблоні компонентів?

Зверніть увагу, що це відрізняється від способів створення параметрів вибору html на основі ВСІХ значень enum (ngFor). Це питання стосується ngSwitch, заснованого на певному значенні перерахунку. Хоча з'являється той самий підхід створення внутрішнього посилання класу на enum.

Ви можете створити посилання на enum у вашому класі компонентів (я просто змінив початковий символ на малі регістри ), а потім використати це посилання з шаблону ( 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;
  }
}

Ви можете створити спеціальний декоратор, щоб додати його до свого компонента, щоб він знав про перерахунки.

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

Це просто і працює як шарм :) просто заявіть про свій перелік таким чином, і ви можете використовувати його в HTML-шаблоні

  statusEnum: typeof StatusEnum = StatusEnum;

Angular4 - Використання Enum у шаблоні HTML ngSwitch / ngSwitchCase

Вирішення тут: https://stackoverflow.com/a/42464835/802196

кредит: @snorkpete

У своєму компоненті у вас є

enum MyEnum{
  First,
  Second
}

Потім у своєму компоненті ви вводите тип Enum через член 'MyEnum' та створюєте іншого члена для вашої змінної enum 'myEnumVar':

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

Тепер ви можете використовувати myEnumVar та MyEnum у своєму .html шаблоні. Наприклад, використовуючи Enums у 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>

станом на rc.6 / final

...

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

Як альтернатива декоратору @Eric Lease, який, на жаль, не працює з використанням --aot(і, таким чином --prod) побудови, я вдався до використання сервісу, який розкриває всі перераховані мої програми. Просто потрібно публічно вводити це в кожен необхідний йому компонент під легким ім'ям, після чого ви можете отримати доступ до переліків у ваших поглядах. Наприклад:

Сервіс

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

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

Не забудьте включити його до списку постачальників модулів.

Клас компонентів

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

  // ...
}

Компонент html

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

Почніть з того, що "Чи справді я хочу це зробити?"

У мене немає проблем із посиланням на перерахунки безпосередньо в HTML, але в деяких випадках є більш чисті альтернативи, які не втрачають безпеку типу. Наприклад, якщо ви обираєте підхід, показаний в іншій моїй відповіді, можливо, ви оголосили TT у своєму компоненті приблизно так:

public TT = 
{
    // Enum defines (Horizontal | Vertical)
    FeatureBoxResponsiveLayout: FeatureBoxResponsiveLayout   
}

Щоб відобразити інший макет у своєму HTML, ви маєте *ngIfдля кожного типу макета, і ви можете звернутися безпосередньо до перерахунку в HTML компонента:

*ngIf="(featureBoxResponsiveService.layout | async) == TT.FeatureBoxResponsiveLayout.Horizontal"

Цей приклад використовує службу для отримання поточного макета, запускає його через трубу асинхронізації, а потім порівнює її з нашим значенням enum. Це досить багатослівно, перекручено і не так весело дивитись. Він також розкриває назву переліків, яка сама може бути надмірно багатослівною.

Альтернативно, що зберігає безпеку типу від HTML

Крім того, ви можете зробити наступне та оголосити більш читану функцію у файлі .ts вашого компонента:

*ngIf="isResponsiveLayout('Horizontal')"

Набагато чистіше! Але що робити, якщо хтось вводить 'Horziontal'помилково? Вся причина, за якою ви хотіли використовувати enum в HTML, полягала в тому, щоб набрати безпечніше правильно?

Ми все ще можемо досягти цього за допомогою маніпуляції з клавіатурою та деякими машинописними магіями . Це визначення функції:

isResponsiveLayout(value: keyof typeof FeatureBoxResponsiveLayout)
{
    return FeatureBoxResponsiveLayout[value] == this.featureBoxResponsiveService.layout.value;
}

Зауважте, використання FeatureBoxResponsiveLayout[string]якого перетворює передане значення рядка в числове значення перерахунку.

Це дасть повідомлення про помилку при компіляції AOT, якщо ви використовуєте недійсне значення.

Аргумент типу "" H4orizontal "" не призначається параметру типу "" Вертикальний "| "Горизонтальний"

В даний час VSCode недостатньо розумний, щоб підкреслити його H4orizontalв редакторі HTML, але ви отримаєте попередження під час компіляції (за допомогою --prod build або --aot перемикача). Це також може бути покращено в майбутньому оновлення.

Мій компонент використовував об’єкт myClassObjectтипу MyClass, який сам використовував MyEnum. Це призводить до того ж питання, описаного вище. Вирішили це, зробивши:

export enum MyEnum {
    Option1,
    Option2,
    Option3
}
export class MyClass {
    myEnum: typeof MyEnum;
    myEnumField: MyEnum;
    someOtherField: string;
}

а потім використовувати це в шаблоні як

<div [ngSwitch]="myClassObject.myEnumField">
  <div *ngSwitchCase="myClassObject.myEnum.Option1">
    Do something for Option1
  </div>
  <div *ngSwitchCase="myClassObject.myEnum.Option2">
    Do something for Option2
  </div>
  <div *ngSwitchCase="myClassObject.myEnum.Option3">
    Do something for Opiton3
  </div>
</div>

Якщо ви використовуєте підхід "посилання на тип" (від @Carl G) і використовуєте кілька типів таблиць, ви можете розглянути такий спосіб:

export default class AppComponent {

  // Store a reference to the enums (must be public for --AOT to work)
  public TT = { 
       CellType: CellType, 
       CatType: CatType, 
       DogType: DogType 
  };

  ...

  dog = DogType.GoldenRetriever; 

Потім перейдіть до свого HTML-файлу за допомогою

{{ TT.DogType[dog] }}   => "GoldenRetriever"

Я віддаю перевагу такому підходу, оскільки він дає зрозуміти, що ви посилаєтесь на тип введення тексту, а також уникаєте зайвого забруднення вашого компонентного файлу.

Ви також можете TTдесь поставити глобальний і додати до нього перерахунки (якщо ви цього хочете, ви також можете зробити послугу, як показано у відповіді @VincentSels). Якщо у вас багато багато друкованих текстів, це може стати громіздким.

Також ви завжди перейменовуєте їх у своїй декларації, щоб отримати коротше ім’я.