Angular 4中匹配对象键值并显示对应语言名称的实现方法

嘿，这个需求在Angular 4里其实有挺直观的实现方式，我给你分享两种最常用的方案：

方案一：自定义管道（推荐，复用性高） #

管道是Angular里专门用来处理视图层数据转换的工具，非常适合这种需要在模板里直接转换编码为名称的场景。

1. 创建自定义管道 #

首先生成一个管道（当然你也可以手动创建）：

ng generate pipe language-name

然后修改language-name.pipe.ts的内容：

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'languageName'
})
export class LanguageNamePipe implements PipeTransform {
  transform(code: string, languages: Array<{name: string, iso_639_2_code: string}>): string {
    // 匹配对应的语言对象
    const language = languages.find(lang => lang.iso_639_2_code === code);
    // 如果找到返回名称，没找到就返回原编码或者自定义默认值
    return language ? language.name : code;
  }
}

2. 在组件中使用管道 #

确保你的组件已经导入并声明了这个管道（如果用ng generate的话，Angular会自动帮你在模块里声明），然后在模板里这样用：

假设组件里的属性是：

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

@Component({
  selector: 'app-user',
  templateUrl: './user.component.html'
})
export class UserComponent {
  languages = [ 
    { "name": "english", "iso_639_2_code": "eng" }, 
    { "name": "esperanto", "iso_639_2_code": "epo" }, 
    { "name": "estonian", "iso_639_2_code": "est" } 
  ];
  users = [ { name: "john", language: "eng", country: "US" } ];
}

模板user.component.html里：

<div *ngFor="let user of users">
  用户名: {{ user.name }} <br>
  语言: {{ user.language | languageName: languages }} <br>
  国家: {{ user.country }}
</div>

方案二：组件内预处理数据 #

如果这个转换只在当前组件用，不需要复用，也可以直接在组件里把数据处理好再渲染：

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

@Component({
  selector: 'app-user',
  templateUrl: './user.component.html'
})
export class UserComponent implements OnInit {
  languages = [ 
    { "name": "english", "iso_639_2_code": "eng" }, 
    { "name": "esperanto", "iso_639_2_code": "epo" }, 
    { "name": "estonian", "iso_639_2_code": "est" } 
  ];
  originalUsers = [ { name: "john", language: "eng", country: "US" } ];
  processedUsers: Array<{name: string, language: string, country: string}> = [];

  ngOnInit() {
    // 预处理数据，把编码替换成名称
    this.processedUsers = this.originalUsers.map(user => {
      const lang = this.languages.find(l => l.iso_639_2_code === user.language);
      return {
        ...user,
        language: lang ? lang.name : user.language
      };
    });
  }
}

然后模板直接用处理好的数据：

<div *ngFor="let user of processedUsers">
  用户名: {{ user.name }} <br>
  语言: {{ user.language }} <br>
  国家: {{ user.country }}
</div>

注意事项 #

如果你的languages数组是通过API异步获取的，记得要等数据加载完成后再处理（比如用async管道，或者在订阅回调里执行转换逻辑），避免出现找不到数据的情况。

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