Angular中根据性别生成带称谓的姓名显示方案求助

有两种简单方式可以实现你的需求：

方法一：模板内直接用三元表达式 #

直接在*ngFor的模板里判断sex字段的值，动态拼接称谓：

<ul>
    <li *ngFor="let d of data">
      {{ d.sex === 'Male' ? 'Mr.' : 'Mrs.' }} {{ d.firstname }} {{ d.lastname }}
    </li>
</ul>

这种方式适合简单场景，能快速实现需求。

方法二：自定义Angular管道（推荐，复用性强） #

如果需要在多个组件里复用这个称谓转换逻辑，自定义管道是更规范的做法：

1. 生成并编写管道文件
   用Angular CLI生成管道（也可以手动创建）：

ng generate pipe title

在title.pipe.ts中编写转换逻辑：

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

@Pipe({
  name: 'title'
})
export class TitlePipe implements PipeTransform {
  transform(sex: string): string {
    return sex === 'Male' ? 'Mr.' : 'Mrs.';
  }
}

2. 在模板中使用管道
   确保管道已在对应模块中声明后，修改模板代码：

<ul>
    <li *ngFor="let d of data">
      {{ d.sex | title }} {{ d.firstname }} {{ d.lastname }}
    </li>
</ul>

两种方法都能实现你想要的输出效果，根据实际场景选择即可。

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