Angular中如何带参数使用*ngFor并按参数输出对应内容

嗨，我来帮你搞定这个动态语言显示的需求～你现在的代码里硬编码了data.en，所以不管lang变量怎么变，都只会显示英文内容对吧？其实只需要调整模板里的属性访问方式就能实现根据lang参数动态加载对应语言的消息。

修改后的代码示例 #

app.component.html #

{{lang}} 
<div> 
  <ul> 
    <li *ngFor="let data of datas">{{data[lang] || '暂无该语言翻译'}}</li> 
  </ul> 
</div>

app.component.ts（无需修改，保留原代码即可） #

import { Component } from '@angular/core'; 

@Component({ 
  selector: 'app-root', 
  templateUrl: './app.component.html', 
  styleUrls: ['./app.component.css'] 
}) 
export class AppComponent { 
  title = 'app'; 
  lang: string = 'en'; 
  datas: any = [ 
    { 
      "ru": "время деньги.", 
      "en": "time is money", 
      "fr": null, 
      "it": "il tempo è denaro", 
      "de": "Zeit Geld", 
      "es": "el tiempo es dinero", 
      "pt": "tempo é dinheiro", 
      "pl": "czas i pieniądze" 
    } 
  ] 
}

关键说明 #

• 用data[lang]替代data.en：Angular支持用方括号语法动态访问对象属性，这里lang是你组件中定义的字符串变量，它会自动匹配data对象里对应的键名（比如lang为'ru'时，就会读取data.ru的值）。
• 添加默认值处理：|| '暂无该语言翻译'是为了处理像fr字段为null的情况，避免页面上出现空白内容，提升用户体验。

如果后续你需要切换语言（比如把lang改成'es'或者'it'），页面上的列表内容会自动同步更新成对应语言的文本，完全不需要修改模板结构～

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