Angular2 доступ к глобальным переменным из шаблона HTML

У меня есть глобальная переменная для хранения списка таких стран:

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

В одном из моих компонентов я импортировал переменную, используя обычный оператор импорта

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

Я могу свободно обращаться к этой глобальной переменной в моем коде компонента, но не смог добиться чего-то подобного в шаблоне HTML:

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

Я мог бы просто передать глобальную переменную компоненту, указав локальную переменную и присвоив ей глобальную переменную во время инициализации.

ngOnInit() {
  this.countryCodes = COUNTRY_CODES;
}

И измените ngFor на цикл этой локальной переменной, чтобы он работал.

Мой вопрос: Это правильный способ? Мне не совсем удобно определять переменные моста каждый раз, когда я хочу использовать глобальные переменные в моем шаблоне.

Ответ 1

Вы создаете переменную countryCodes в своем компоненте, но вместо этого вид открывается COUNTRY_CODES *

Глобальные идентификаторы, такие как Array, window, document, имена классов и перечислений и глобальные переменные не могут быть доступны непосредственно из шаблона.

Объем шаблона - это экземпляр класса компонента.

Что вы можете сделать, если вам нужен доступ к любому из них, является создание получателя в вашем компоненте, например

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

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

то он может использоваться в шаблоне, например

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

Использование общей службы, как предлагается в других ответах, работает аналогично. Какой лучший подход зависит от конкретного варианта использования. Службы легко издеваются над модульными тестами вопреки глобальным переменным.

См. также

Ответ 2

Первый #

вы должны заметить, что в вашем COUNTRY_CODES есть проблема. вы положили две двойные кавычки в начале.

Должно быть,

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

Второй #

Как только вы передадите значение const в this.countryCode, вы должны использовать его в цикле ngfor, например,

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

ИЛИ

Если вы прямо хотите использовать его в HTML, Id предложите сделать sharedService для определения глобальной переменной.

UPDATE

Другой способ - использовать provide function and define your constant there in provide function внутри bootstrap function, а затем вставить его в соответствующий компонент, чтобы использовать его.

Проверьте здесь,

Рабочий пример

Ответ 3

измените это как

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

ваш код имеет дополнительный " в вашем массиве, поэтому вам нужно удалить это, прежде чем ваш код будет запущен как smotly

рабочий плункер