如何在*ngFor中通过动态键获取environment.ts的值？

你遇到的问题是在Angular模板的属性绑定中，试图用插值表达式{{}}拼接environment的属性名，这种写法不符合Angular的模板语法规则。下面是正确的实现方式：

核心修正点 #

在Angular的属性绑定（[]）内部，不需要嵌套插值表达式，直接使用JavaScript对象的方括号属性访问语法，结合模板字符串拼接属性名即可。

正确的模板代码 #

<!-- 本土地图保留原有写法 -->
<div>
  <app-carte 
    [nom]="environment.metropole_nom"
    [url_couche]="environment.metropole_couche_url"
    [layer_couche]="environment.metropole_couche_layer"
    [longitude]="environment.metropole_longitude_initale"
    [latitude]="environment.metropole_latitude_initale"
    [zoom]="environment.metropole_zoom"
    [projection]="environment.metropole_projection"
  ></app-carte>
</div>

<!-- 海外地区地图用*ngFor循环渲染 -->
<div>
  <div *ngFor="let outremer of regions_outremer">
    <app-carte 
      [nom]="environment[`${outremer}_nom`]"
      [url_couche]="environment[`${outremer}_couche_url`]"
      [layer_couche]="environment[`${outremer}_couche_layer`]"
      [longitude]="environment[`${outremer}_longitude_initale`]"
      [latitude]="environment[`${outremer}_latitude_initale`]"
      [zoom]="environment[`${outremer}_zoom`]"
      [projection]="environment[`${outremer}_projection`]"
    ></app-carte>
  </div>
</div>

语法说明 #

• 模板字符串`${outremer}_nom`会动态生成对应的属性名（比如guadeloupe_nom、martinique_nom）
• environment[动态属性名]是JavaScript标准的对象属性访问方式，Angular模板支持直接使用这种表达式

可选优化方案 #

如果后续需要扩展地区信息（比如添加地区显示名称），可以把数组改成对象数组，让代码可读性更强：

修改组件代码 #

export class CarteFranceComponent {
  protected readonly environment = environment;
  // 用对象存储地区标识和显示名称
  protected regions_outremer = [
    { id: 'guadeloupe', name: '瓜德罗普' },
    { id: 'martinique', name: '马提尼克' },
    { id: 'guyane', name: '法属圭亚那' },
    { id: 'la_reunion', name: '留尼汪' },
    { id: 'mayotte', name: '马约特' }
  ];
}

优化后的模板代码 #

<div>
  <div *ngFor="let region of regions_outremer">
    <h4>{{ region.name }}</h4>
    <app-carte 
      [nom]="environment[`${region.id}_nom`]"
      [url_couche]="environment[`${region.id}_couche_url`]"
      [layer_couche]="environment[`${region.id}_couche_layer`]"
      [longitude]="environment[`${region.id}_longitude_initale`]"
      [latitude]="environment[`${region.id}_latitude_initale`]"
      [zoom]="environment[`${region.id}_zoom`]"
      [projection]="environment[`${region.id}_projection`]"
    ></app-carte>
  </div>
</div>

内容的提问来源于stack exchange，提问作者Marc Le Bihan