如何在Angular表格td元素中提取邮箱的用户名部分

方法一：模板内直接拆分字符串 #

直接在绑定表达式里用split方法拆分邮箱字符串，取@符号前的部分：

<tr *ngFor="let historydata of data?.rows">
  <td class="is-breakable">{{ historydata?.created_by?.split('@')[0] }}</td>
</tr>

• 用?.可选链操作符避免null/undefined报错；
• 如果邮箱格式不合法（没有@），会直接显示原字符串，可根据需求额外加判断逻辑。

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

如果多个页面或组件都需要提取邮箱用户名，自定义管道是更规范的做法：

1. 生成管道文件：

ng generate pipe username-from-email

2. 修改管道的transform方法，处理空值和非法邮箱：

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

@Pipe({
  name: 'usernameFromEmail'
})
export class UsernameFromEmailPipe implements PipeTransform {
  transform(email: string): string {
    if (!email || !email.includes('@')) {
      return email || '';
    }
    return email.split('@')[0];
  }
}

3. 在模板中使用管道：

<tr *ngFor="let historydata of data?.rows">
  <td class="is-breakable">{{ historydata?.created_by | usernameFromEmail }}</td>
</tr>

注意：要确保管道已在对应模块的declarations数组中声明，或通过共享模块全局导入。

方法三：组件内预处理数据 #

如果该数据需要多次使用用户名，可在组件内提前处理好，让模板更简洁：

// 假设在获取数据的回调逻辑中
this.dataService.getHistoryData().subscribe(res => {
  this.data = res;
  if (this.data?.rows) {
    this.data.rows.forEach(item => {
      item.username = item.created_by?.split('@')[0] || item.created_by || '';
    });
  }
});

之后模板直接绑定预处理好的字段：

<tr *ngFor="let historydata of data?.rows">
  <td class="is-breakable">{{ historydata?.username }}</td>
</tr>

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