So verwenden Sie einen Typoskript-Aufzählungswert in einer Angular2 ngSwitch-Anweisung

Die Typescript-Aufzählung scheint eine natürliche Übereinstimmung mit der ngSwitch-Direktive von Angular2 zu sein. Wenn ich jedoch versuche, eine Aufzählung in der Vorlage meiner Komponente zu verwenden, wird "Eigenschaft 'xxx' von undefiniert in ... kann nicht gelesen werden" angezeigt. Wie kann ich Enum-Werte in meiner Komponentenvorlage verwenden?

Bitte beachten Sie, dass dies anders ist als das Erstellen von HTML-Auswahloptionen basierend auf ALLEN Werten einer Aufzählung (ngFor). Diese Frage bezieht sich auf ngSwitch basierend auf einem bestimmten Wert einer Aufzählung. Obwohl der gleiche Ansatz zum Erstellen eines klasseninternen Verweises auf die Aufzählung erscheint.

Sie können einen Verweis auf die Aufzählung in Ihrer Komponentenklasse erstellen (ich habe gerade das ursprüngliche Zeichen in Kleinbuchstaben geändert) und dann diesen Verweis aus der Vorlage ( Plunker ) verwenden:

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

Sie können einen benutzerdefinierten Dekorator erstellen, der Ihrer Komponente hinzugefügt wird, um sie auf Aufzählungen aufmerksam zu machen.

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

Dies ist einfach und funktioniert wie ein Zauber :) Deklarieren Sie einfach Ihre Aufzählung wie folgt und Sie können sie für HTML-Vorlagen verwenden

  statusEnum: typeof StatusEnum = StatusEnum;

Angular4 - Verwenden von Enum in der HTML-Vorlage ngSwitch / ngSwitchCase

Lösung hier: https://stackoverflow.com/a/42464835/802196

Bildnachweis: @snorkpete

In Ihrer Komponente haben Sie

enum MyEnum{
  First,
  Second
}

Anschließend bringen Sie in Ihrer Komponente den Aufzählungstyp über ein Mitglied 'MyEnum' ein und erstellen ein weiteres Mitglied für Ihre Aufzählungsvariable 'myEnumVar':

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

Sie können jetzt myEnumVar und MyEnum in Ihrer HTML-Vorlage verwenden. Beispiel: Verwenden von Enums in 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>

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

Als Alternative zu @Eric Leases Dekorateur, der leider nicht mit --aot(und damit --prod) Builds funktioniert , habe ich auf einen Dienst zurückgegriffen, der alle Aufzählungen meiner Anwendung verfügbar macht. Sie müssen dies nur öffentlich in jede Komponente einfügen, für die dies erforderlich ist, und zwar unter einem einfachen Namen. Danach können Sie auf die Aufzählungen in Ihren Ansichten zugreifen. Z.B:

Bedienung

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

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

Vergessen Sie nicht, es in die Anbieterliste Ihres Moduls aufzunehmen.

Komponentenklasse

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

  // ...
}

Komponente HTML

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

Beginnen Sie mit der Überlegung, ob ich das wirklich tun möchte.

Ich habe kein Problem damit, auf Enums direkt in HTML zu verweisen, aber in einigen Fällen gibt es sauberere Alternativen, die die Typensicherheit nicht verlieren. Wenn Sie beispielsweise den in meiner anderen Antwort gezeigten Ansatz wählen, haben Sie möglicherweise TT in Ihrer Komponente wie folgt deklariert:

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

Um ein anderes Layout in Ihrem HTML-Code anzuzeigen, haben Sie *ngIffür jeden Layouttyp ein Layout, und Sie können direkt auf die Aufzählung im HTML-Code Ihrer Komponente verweisen:

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

In diesem Beispiel wird ein Dienst verwendet, um das aktuelle Layout abzurufen, es durch die asynchrone Pipe auszuführen und es dann mit unserem Aufzählungswert zu vergleichen. Es ist ziemlich ausführlich, verschlungen und macht nicht viel Spaß, es anzuschauen. Es enthüllt auch den Namen der Aufzählung, die selbst zu ausführlich sein kann.

Alternativ bleibt die Typensicherheit des HTML-Codes erhalten

Alternativ können Sie Folgendes tun und eine besser lesbare Funktion in der .ts-Datei Ihrer Komponente deklarieren:

*ngIf="isResponsiveLayout('Horizontal')"

Viel sauberer! Aber was ist, wenn jemand versehentlich 'Horziontal'tippt? Der ganze Grund, warum Sie eine Aufzählung im HTML verwenden wollten, war typsicher zu sein, oder?

Wir können das immer noch mit keyof und etwas Typoskript-Magie erreichen. Dies ist die Definition der Funktion:

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

Beachten Sie, bei FeatureBoxResponsiveLayout[string]welcher Verwendung der übergebene Zeichenfolgenwert in den numerischen Wert der Aufzählung konvertiert wird .

Dies gibt eine Fehlermeldung mit einer AOT-Kompilierung aus, wenn Sie einen ungültigen Wert verwenden.

Das Argument vom Typ '"H4orizontal"' kann nicht dem Parameter vom Typ '"Vertikal" | zugewiesen werden "Horizontal"

Derzeit ist VSCode nicht intelligent genug, um H4orizontalim HTML-Editor zu unterstreichen , aber Sie erhalten die Warnung beim Kompilieren (mit --prod build oder --aot switch). Dies kann auch in einem zukünftigen Update verbessert werden.

Meine Komponente verwendete ein Objekt myClassObjectvom Typ MyClass, das selbst verwendet wurde MyEnum. Dies führte zu dem oben beschriebenen Problem. Es wurde gelöst durch:

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

und dann in der Vorlage als verwenden

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

Wenn Sie den Ansatz "Typetable Reference" (von @Carl G) verwenden und mehrere Typentabellen verwenden, sollten Sie Folgendes berücksichtigen:

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; 

Dann greifen Sie in Ihrer HTML-Datei mit zu

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

Ich bevorzuge diesen Ansatz, da er deutlich macht, dass Sie sich auf eine Typetabelle beziehen, und außerdem eine unnötige Verschmutzung Ihrer Komponentendatei vermeidet.

Sie können auch TTirgendwo eine globale Datei einfügen und nach Bedarf Aufzählungen hinzufügen (wenn Sie dies möchten, können Sie auch einen Dienst erstellen, wie in der Antwort von @VincentSels gezeigt). Wenn Sie viele, viele Typetabellen haben, kann dies umständlich werden.

Außerdem benennen Sie sie in Ihrer Deklaration immer um, um einen kürzeren Namen zu erhalten.