角度扩展运算符无法正常工作？

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

users 是一个引用类型。因此，您需要创建对象的深层副本。尝试使用JSON.parse 方法创建对象的深拷贝：

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

Answer 2

在您的函数中，将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 3

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

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

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

这样您就不需要考虑展开运算符的工作原理了。

this.getAdminName(this.data.users) 

Answer 4

首先Spread操作不行，

原因，它仅对单层数据结构有用，即原始数据类型数组，对于对象数组，当嵌套属性在图片中时，它不会创建深层副本。

所以你应该使用 Lodashs cloneDeep 方法。

更新

在你的 Angular 项目中安装 lodash

然后像这样导入

从“lodash”导入 { cloneDeep }； 块引用

并像使用它一样，

  getAdminName(users){
   let usersList = cloneDeep(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]
  }

这应该可以解决您的问题?

Answer 5

数组上的扩展运算符只是扩展数组。在您使用它的方式中，您只需将等量的参数传递给 getAdmin() 方法或 userList 变量作为数组中的元素。

试试这样的：

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

getAdminName(users){
   const adminUser = users.find(({ role }) => {
     role = role.replace(/\s/g, '-').toUpperCase()
     return role === 'PROFILE-ADMIN'
   });
   this.adminName = adminUser.name;
}