Cara menggunakan nilai skrip enum dalam pernyataan Angular2 ngSwitch

Encript Script tampaknya cocok alami dengan arahan ngSwitch Angular2. Tetapi ketika saya mencoba menggunakan enum dalam templat komponen saya, saya mendapatkan "Tidak dapat membaca properti 'xxx' dari yang tidak terdefinisi di ...". Bagaimana saya bisa menggunakan nilai enum dalam templat komponen saya?

Harap dicatat bahwa ini berbeda dari cara membuat opsi pilih html berdasarkan SEMUA nilai enum (ngFor). Pertanyaan ini adalah tentang ngSwitch berdasarkan nilai enum tertentu. Meskipun pendekatan yang sama untuk membuat referensi kelas-internal ke enum muncul.

Anda dapat membuat referensi ke enum di kelas komponen Anda (saya baru saja mengubah karakter awal menjadi huruf kecil) dan kemudian menggunakan referensi itu dari templat ( 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;
  }
}

Anda dapat membuat dekorator khusus untuk ditambahkan ke komponen Anda agar membuatnya sadar akan 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;
  }
}

Ini sederhana dan berfungsi seperti pesona :) cukup nyatakan enum Anda seperti ini dan Anda dapat menggunakannya pada templat HTML

  statusEnum: typeof StatusEnum = StatusEnum;

Angular4 - Menggunakan Enum di Template HTML ngSwitch / ngSwitchCase

Solusi di sini: https://stackoverflow.com/a/42464835/802196

kredit: @snorkpete

Di komponen Anda, Anda punya

enum MyEnum{
  First,
  Second
}

Kemudian di komponen Anda, Anda membawa tipe Enum melalui anggota 'MyEnum', dan membuat anggota lain untuk variabel enum Anda 'myEnumVar':

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

Sekarang Anda dapat menggunakan myEnumVar dan MyEnum di templat .html Anda. Misalnya, Menggunakan Enums di 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>

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

Sebagai alternatif dari dekorator @Eric Lease, yang sayangnya tidak berfungsi menggunakan --aot(dan dengan demikian --prod) dibangun, saya menggunakan layanan yang memaparkan semua enums aplikasi saya. Hanya perlu menyuntikkan secara publik ke setiap komponen yang memerlukannya, dengan nama yang mudah, setelah itu Anda dapat mengakses enum dalam pandangan Anda. Misalnya:

Layanan

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

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

Jangan lupa untuk memasukkannya ke dalam daftar penyedia modul Anda.

Kelas komponen

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

  // ...
}

Komponen html

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

Mulailah dengan mempertimbangkan, 'Apakah saya benar - benar ingin melakukan ini?'

Saya tidak punya masalah merujuk langsung ke enums dalam HTML, tetapi dalam beberapa kasus ada alternatif yang lebih bersih yang tidak kehilangan jenis keamanan. Misalnya jika Anda memilih pendekatan yang ditunjukkan dalam jawaban saya yang lain, Anda mungkin telah menyatakan TT dalam komponen Anda, seperti ini:

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

Untuk menampilkan tata letak yang berbeda di HTML Anda, Anda akan memiliki *ngIfuntuk setiap jenis tata letak, dan Anda bisa merujuk langsung ke enum di HTML komponen Anda:

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

Contoh ini menggunakan layanan untuk mendapatkan tata letak saat ini, menjalankannya melalui pipa async dan kemudian membandingkannya dengan nilai enum kami. Sangat bertele-tele, berbelit-belit dan tidak menyenangkan untuk dilihat. Itu juga memperlihatkan nama enum, yang itu sendiri mungkin terlalu bertele-tele.

Alternatif, yang mempertahankan keamanan jenis dari HTML

Atau Anda dapat melakukan hal berikut, dan mendeklarasikan fungsi yang lebih mudah dibaca dalam file .ts komponen Anda:

*ngIf="isResponsiveLayout('Horizontal')"

Jauh lebih bersih! Tetapi bagaimana jika seseorang mengetik 'Horziontal'secara tidak sengaja? Seluruh alasan Anda ingin menggunakan enum dalam HTML adalah untuk mengetik dengan benar, bukan?

Kita masih bisa mencapainya dengan keyof dan beberapa sihir naskah. Ini adalah definisi fungsi:

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

Perhatikan penggunaan FeatureBoxResponsiveLayout[string]yang mengubah nilai string yang diteruskan ke nilai numerik enum.

Ini akan memberikan pesan kesalahan dengan kompilasi AOT jika Anda menggunakan nilai yang tidak valid.

Argumen tipe '"H4orizontal"' tidak dapat dialihkan ke parameter tipe '"Vertikal" | "Horisontal"

Saat ini VSCode tidak cukup pintar untuk menggarisbawahi H4orizontaldalam editor HTML, tetapi Anda akan mendapatkan peringatan pada waktu kompilasi (dengan --prod build atau --aot switch). Ini juga dapat ditingkatkan pada pembaruan di masa mendatang.

Komponen saya menggunakan objek myClassObjectbertipe MyClass, yang digunakan sendiri MyEnum. Ini mengarah pada masalah yang sama seperti dijelaskan di atas. Selesaikan dengan melakukan:

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

dan kemudian menggunakan ini di templat sebagai

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

Jika menggunakan pendekatan 'typetable reference' (dari @Carl G) dan Anda menggunakan beberapa tabel tipe, Anda mungkin ingin mempertimbangkan cara ini:

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; 

Kemudian akses dengan file html Anda dengan

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

Saya mendukung pendekatan ini karena menjelaskan Anda merujuk pada jenis yang dapat diubah, dan juga menghindari polusi yang tidak perlu pada file komponen Anda.

Anda juga dapat meletakkan global di TTsuatu tempat dan menambahkan enum ke sana sesuai kebutuhan (jika Anda menginginkan ini, Anda juga dapat membuat layanan seperti yang ditunjukkan oleh jawaban @VincentSels). Jika Anda memiliki banyak jenis huruf ini mungkin menjadi rumit.

Anda juga selalu mengganti nama mereka dalam deklarasi Anda untuk mendapatkan nama yang lebih pendek.