¿Cómo puedo usar Enums en la plantilla Angular 8?
componente.ts
import { Component } from '@angular/core'; import { SomeEnum } from './global'; @Component({ selector: 'my-app', templateUrl: './app.component.html', styleUrls: [ './app.component.css' ] }) export class AppComponent { name = SomeEnum.someValue; }componente.html
<span *ngIf="name === SomeEnum.someValue">This has some value</value> Esto actualmente no funciona, ya que la plantilla no hace referencia a SomeEnum . ¿Cómo puedo resolverlo?
ERROR Error: Cannot read property 'someValue' of undefined
Tendrás que declararlo como una propiedad primero:
import { Component } from '@angular/core'; import { SomeEnum } from './global'; @Component({ selector: 'my-app', templateUrl: './app.component.html', styleUrls: [ './app.component.css' ] }) export class AppComponent { name = SomeEnum.someValue; importedSomeEnum = SomeEnum; }Y luego úsalo en la plantilla:
<span *ngIf="name === importedSomeEnum.someValue">This has some value</span>Aquí hay una demostración de trabajo para su ref.
Puede declarar un campo igual a la enumeración SomeEnum (puede importarse desde otro archivo) como un campo de clase pública en el archivo del componente. Entonces será accesible en la plantilla.
// component export class AppComponent { name = SomeEnum.someValue; enum = SomeEnum; } // template <span *ngIf="name === enum.someValue">This has some value</value>en el TS
import { SomeEnum } from 'path-to-file'; public get SomeEnum() { return SomeEnum; }en el uso de HTML
*ngIf="SomeEnum.someValue === 'abc'" EDITAR: pasa el tiempo y aprendemos más como desarrolladores, el enfoque que estoy usando en este momento no usa el método get . Ambas soluciones funcionan, solo elige la que más te guste.
en el TS
import { SomeEnum } from 'path-to-file'; export class ClassName { readonly SomeEnum = SomeEnum; }en el uso de HTML
*ngIf="SomeEnum.someValue === 'abc'"Sí, la plantilla no puede hacer referencia a la enumeración directamente. Hay pocas maneras de hacer esto. 1. Agregue la referencia Enum al archivo ts del componente como se muestra a continuación
someEnum = SomeEnum;entonces podrá usar la referencia en su plantilla de esta manera
<span *ngIf="name === someEnum.someValue">This has some value</value> <span *ngIf="checkCondition(name)">This has some value</value>