代码之家 › 专栏 › 技术社区 › Thiago Souza

Angular:对象键可以通过组件脚本上的变量访问,但不能在HTML上访问

types typescript angular

0

Thiago Souza · 技术社区 · 1 年前

我在环境文件中导出的对象上有一些字符串,这样我就可以全局使用这些值。

这是我的环境。ts

export interface RegionNames {
  br: any;
  bo: any;
}

export const environment = {
  production: false,
  region_id: "br",
};

export const region_phrases: RegionNames = {
  br: {
    "string1": "A",
    "string2": "B",
    "string3": "C",
    "string4": "D",
    "string5": "E",
  },
  bo: {
    "string1": "AA",
    "string2": "BB",
    "string3": "CC",
    "string4": "DD",
    "string5": "EE",
  }
}

这是在组件脚本中,我可以成功地从对象中收集字符串:

console.log(region_phrases[environment.region_id as keyof RegionNames].string1);

但是,当我尝试在HTML模板上运行完全相同的代码时,它会返回一个错误:

<span class="visually-hidden">{{ region_phrases[environment.region_id as keyof RegionNames].string1 }}</span>

错误TS7053:元素隐式具有“any”类型,因为“string”类型的表达式不能用于索引“RegionNames”类型。在类型“RegionNames”上找不到具有“string”类型参数的索引签名。

<span class=“视觉上隐藏”>{{region_prases[environment.region_id作为RegionNames的键].string1}}</跨度>

我不想在项目的每个组件中为对象创建变量,只是为了在HTML中访问它,有没有更容易解决这个问题的方法?

1 回复 | 直到 1 年前

1

Yong Shun 1 年前

指定 environment 类型为:

export const environment: { production: false; region_id: keyof RegionNames } =
  {
    production: false,
    region_id: 'br',
  };

在HTML中,删除 as keyof RegionNames .

<span class="visually-hidden">{{ region_phrases[environment.region_id].string1 }}</span>

Demo @ StackBlitz