角度扩展操作员工作不正常？

Question

我正在尝试以角度处理数组。我需要从数组中获取管理员用户名，并尝试下面的方法

export class AppComponent  {
  adminName = ''
  data = {
    id:1,
    name:'Test User One',
    users:[
      {id:1,name:'User 2',role:'Management Admin'},
      {id:2,name:'User 3',role:'User'},
      {id:3,name:'User 1',role:'Profile Admin'},
    ]
  }

  ngOnInit(){
     this.getAdminName(this.data.users)
  }

  getAdminName(users){
   let name = ''
    name = users.filter((user)=>{
      user.role = user.role.replace(/\s/g, '-').toUpperCase()
      return user.role === 'PROFILE-ADMIN'
    }).map(row=>{
      return row.name
    })
    this.adminName = name[0]
  }
}

这是可行的，我可以得到adminName，但它也改变了数据对象的角色，并像这样转换对象

{
  "id": 1,
  "name": "Test User One",
  "users": [
    {
      "id": 1,
      "name": "User 2",
      "role": "MANAGEMENT-ADMIN"
    },
    {
      "id": 2,
      "name": "User 3",
      "role": "USER"
    },
    {
      "id": 3,
      "name": "User 1",
      "role": "PROFILE-ADMIN"
    }
  ]
}

我理解为什么会发生这种情况，我尝试使用扩展运算符，但它不起作用，我尝试了下面的方法

this.getAdminName([...this.data.users]) // passing from here using spread operator

第二步

getAdminName(users){
   let usersList = [...users]
   let name = ''
    name = usersList.filter((user)=>{
      user.role = user.role.replace(/\s/g, '-').toUpperCase()
      return user.role === 'PROFILE-ADMIN'
    }).map(row=>{
      return row.name
    })
    this.adminName = name[0]
  }

我可以像下面这样做

getAdminName(users){
   let name = ''
   let role;
    name = users.filter((user)=>{
      role = user.role //used a variable in which holds 
      role = role.replace(/\s/g, '-').toUpperCase()
      return role === 'PROFILE-ADMIN'
    }).map(row=>{
      return row.name
    })
    this.adminName = name[0]
  }

但我想这样做使用扩散操作员的方法，所以请建议我哪里出错

Stackblitz链接在这里

https://stackblitz.com/edit/angular-rjnytr

Answer 1

在函数中，将user.role=user.role.replace（/\s/g, '-').toUpperCase（）替换为一个新变量，如下所示：

getAdminName(users){
   let usersList = [...users]
   let name = ''
    name = usersList.filter((user)=>{
      let role = user.role;
      role = role.replace(/\s/g, '-').toUpperCase()
      return role === 'PROFILE-ADMIN'
    }).map(row=>{
      return row.name
    })
    this.adminName = name[0]
  }

Answer 2

用户是一种参考类型。因此，您需要创建对象的深度副本。尝试使用JSON.parse方法创建对象的深度副本：

let usersList = [...JSON.parse(JSON.stringify(users))]

Answer 3

我会改变过滤器逻辑以避免任何副作用。

getAdminName(users) {
  const name = users
    .filter(user => user.role.replace(/\s/g, '-').toUpperCase() === 'PROFILE-ADMIN')
    .map(row => row.name);

  return name ? name[0] : '';
}

这样，您就不需要考虑spread操作符是如何工作的。

this.getAdminName(this.data.users)