如何在Angular插值中使用*ngFor迭代变量？

你的核心问题是用循环变量作为对象属性名来取值，Angular中不能直接用点语法访问动态属性，得用方括号属性访问器，修改后的HTML代码如下：

<div *ngFor="let data of information">
    <div *ngIf="data.zone== 'europe'">
         <div *ngFor="let city of data.names">
              {{city.title}} : {{ DBdata[city.dbName] }}
         </div>
    </div>
</div>

关键说明： #

• 原来的DBdata.city.dbName写法错误，因为city是循环变量，city.dbName才是你要取的属性名（比如city1、city2），必须用DBdata[city.dbName]这种方括号语法来访问对象的动态属性。
• 如果数据库返回的DBdata可能缺少部分城市的属性，建议加上空值保护避免报错：

  {{city.title}} : {{ DBdata?.[city.dbName] || '暂无数据' }}
  

额外优化建议（可选）： #

如果information里的其他区域（比如示例中的XX）也需要类似处理，可以去掉*ngIf="data.zone== 'europe'"，或者根据不同zone做不同逻辑，避免硬编码判断。

内容的提问来源于stack exchange，提问作者alejovelez41