我有一个全局变量来存储这样的国家/地区列表：
export var COUNTRY_CODES = ["AD","AE","AF" /* and more */];
在我的一个组件中，我使用普通的import语句导入了变量
import { COUNTRY_CODES } from "../constants";
我可以在组件代码中自由访问这个全局变量，但是在HTML模板上无法实现这样的功能：
<option *ngFor="let countryCode of COUNTRY_CODES" [value]="countryCode">{{countryCode | countryName}}</option>
我可以通过定义局部变量将全局变量传递给组件，并在初始化期间为其分配全局变量。
ngOnInit() {
this.countryCodes = COUNTRY_CODES;
}
并更改ngFor以循环此局部变量以使其工作。
您正在组件中创建变量countryCodes，但视图正在访问COUNTRY_CODES *
原文链接：/angularjs/143983.html无法直接从模板中访问全局标识符，如数组，窗口，文档，类和枚举名称以及全局变量。
模板的范围是组件类实例。
如果您需要访问其中任何一个，您可以做的是在组件中创建一个getter
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>
使用其他答案中建议的共享服务的工作方式类似。更好的方法取决于具体的用例。与全局变量相反，服务很容易模拟单元测试。
也可以看看
> Select based on enum in Angular2
> How to bind a list in Angular2?
