Angular数组对象字符串拼接二次调用时内容重复问题

数据老陈

2026-9-1

问题根因

你当前的拼接逻辑直接修改了原数组对象的Name属性：第一次执行后，Name已经从原始值test被改成了test (Manager)，第二次触发逻辑时，代码会在这个已经被修改过的值后面再次拼接Desig后缀，自然就出现了test (Manager) (Manager)的重复拼接问题。

修复方案

你可以根据业务场景选下面任意一种方案：

方案1：拼接前做校验，避免重复追加
执行拼接前先判断当前Name是否已经带了对应的职位后缀，只有没拼过的时候才执行拼接操作：

exampleUser.forEach(e => {
  const positionSuffix = ` (${e.Desig})`;
  // 检查后缀是否已存在，不存在才拼接
  if (!e.Name.endsWith(positionSuffix)) {
    e.Name = e.Name + positionSuffix;
  }
});

方案2：不修改原始字段，单独维护展示值（推荐，符合Angular数据不可变规范）
不要直接修改存原始名称的Name字段，在ExampleUser接口里新增一个专门用于页面展示的字段，每次都基于原始的Name和Desig生成展示值，从根源避免污染原始数据：

// 调整接口定义
interface ExampleUser {
  userId: number;
  Name: string; // 始终存储原始名称，不做修改
  Desig: string;
  displayName?: string; // 专门存储拼接后的展示内容
}

// 拼接逻辑，无论执行多少次都基于原始值生成，不会重复
exampleUser.forEach(e => {
  e.displayName = `${e.Name} (${e.Desig})`;
});
// 页面模板里绑定displayName做展示即可