page - ng-template angular 6

Angular2 accede a variables globales desde plantilla HTML

Question

Tengo una variable global para almacenar la lista de países como este:

export var COUNTRY_CODES = ["AD", "AE", "AF" /* and more */];

En uno de mis componentes, importé la variable usando una declaración de importación normal

import { COUNTRY_CODES } from "../constants";

Puedo acceder a esta variable global libremente en mi código de componente, pero no logré algo como esto en la plantilla HTML:

<option *ngFor="let countryCode of COUNTRY_CODES" [value]="countryCode">{{countryCode | countryName}}</option>

Podría pasar la variable global al componente definiendo una variable local y asignarle la variable global durante la inicialización.

ngOnInit() {
  this.countryCodes = COUNTRY_CODES;
}

Y cambia el ngFor para hacer un bucle en esta variable local para que funcione.

Mi pregunta: ¿Es esta la forma correcta de hacerlo? No me siento totalmente cómodo con la definición de variables de puenteo cada vez que quiero usar variables globales en mi plantilla.

Answer 1

Está creando una variable countryCodes en su componente, pero la vista está accediendo a COUNTRY_CODES lugar *

No se puede acceder directamente a los identificadores globales como Array , window , document , clase y nombres de enumeración y variables globales directamente desde la plantilla.

El ámbito de la plantilla es la instancia de clase de componente.

Lo que puede hacer si necesita acceder a cualquiera de estos, es crear un captador en su componente como

import { COUNTRY_CODES } from "../constants";

@Component(...)  
export class MyComponent {
  get countryCodes() { return COUNTRY_CODES; }
  // or countryCodes = COUNTRY_CODES;
}

entonces se puede utilizar en la plantilla como

<option *ngFor="let countryCode of countryCodes" [value]="countryCode">{{countryCode | countryName}}</option>

Usar un servicio compartido como se sugiere en las otras respuestas funciona de manera similar. Cuál es el mejor enfoque depende del caso de uso concreto. Los servicios son fáciles de simular para pruebas de unidad en contra de las variables globales.

Ver también

• Seleccione basado en enumeración en Angular2
• ¿Cómo enlazar una lista en Angular2?

Answer 2

Primero #

debe tener en cuenta que hay un problema en su COUNTRY_CODES. Usted ha puesto dos comillas dobles al principio.

Debería ser ,

Export var COUNTRY_CODES=["AD","AE","AF"];

Segundo #

Una vez que le pasa el valor de const a this.countryCode , debe usarlo en ngfor loop like

*ngFor = "let cc in countryCode" [value]="cc"

O

Si desea utilizarlo directamente en HTML, Id sugiere hacer un servicio sharedService para definir una variable global.

ACTUALIZAR

Otra forma es que puede usar la provide function and define your constant there in provide function dentro de la bootstrap function luego inyectarla en el componente respectivo para usarla.

Echa un vistazo de esa manera aquí,

Ejemplo de trabajo

Answer 3

Quería hacer algo similar, pero con muchas constantes simples.

Definir un captador para cada uno de ellos fue realmente molesto, al igual que el método de creación de un servicio para estas constantes, ya que significaba que solo podía usarlas donde realmente podía inyectarlo (o, de nuevo, trabajo adicional).

Descubrí que el uso de plantillas en línea, lo solucioné para mí, ya que permite compilar las constantes en la plantilla, usando sintaxis de plantilla de tipos de letra multilínea `$ {variable}` - lo único a tener en cuenta es que los valores deben ajustarse de acuerdo con su tipo Convertirse en el método array.toString () daría como resultado ''1,2,3,4'', por lo que debe envolverlo en "[]" / "''string''", por lo que el motor de plantillas de ángulos lo toma como un conjunto / cadena otra vez.

Edición: Acabo de ver que se mencionó un método similar, pero tampoco quiero inyectar cada valor individual en el constuctor, ya que sería tan incómodo como definir un miembro por valor.

constantes.ts:

export const TEST_STRING = ''route'';
export const TEST_ARRAY = [1, 2, 3, 4];

componente.ts:

 import {
  TEST_STRING,
  TEST_ARRAY
 } from ''constants.ts''
 @Component({
  selector: ''hn-header'',
  template: ''
      <a [routerLink]="[''${TEST_STRING}'']">Link</a>
      <div *ngFor="let test of [${TEST_ARRAY}];">{{test}}</div>
  ''
  styleUrls: [''./header.component.css'']
 })
 export class HeaderComponent {...}

resultados en:

<a href="route">Link</a>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>

Answer 4

cambiar esto como

export var COUNTRY_CODES = ["AD", "AE", "AF"];

su código tiene más " en su matriz, por lo que debe eliminar esto antes de que su código se ejecute con suavidad

trabajando plunker