如何将值修补回 Angular 13 中的对象？

Question

我对 Angular 13 中的 patchValue 和 setValue 有疑问。

我有一个使用 formBuilder 创建的名为 manageUsers 的表单。在其中，我有一个名为 userRoles 的键，其中包含一个 布尔数组。

manageUsers 表单包含用户角色的复选框。布尔数组根据布尔值将这些复选框变为选中/未选中。

当你第一次访问页面时，manageUsers表单中的userRoles数组，默认是这样的……

this.manageUsers.value.userRoles = [false, false, false, false, false]

当用户选中或取消选中复选框时，表单会识别状态更改并启用“保存更改”按钮。如果有人单击“保存更改”按钮，则 manageUsers 表单将被发送到端点并保存在数据库中。

当您选择一个用户（例如“Anthony”）时，该用户的信息将根据 5 个用户角色的列表进行检查，如下所示...

[
    {
        "id": 1,
        "name": "AnalyticalAdmin"
    },
    {
        "id": 2,
        "name": "Analyst"
    },
    {
        "id": 4,
        "name": "AdminReviewer"
    },
    {
        "id": 5,
        "name": "SystemAdministrator"
    },
    {
        "id": 6,
        "name": "CaseworkSTRTechLeader"
    }
]

查看分配给 Anthony 的角​​色。假设分配了“AdminReviewer”。然后生成的 userRoles 数组将如下所示...

this.manageUsers.value.userRoles = [false, false, true, false, false]

这意味着表单中的第三个复选框（“AdminReviewer”）将被选中，而其他复选框不会被选中。因此，假设您要选中第二个复选框（“Analyst”）。 manageUsers 表单中更新后的 userRoles 将如下所示...

this.manageUsers.value.userRoles = [false, true, true, false, false]

我所做的是编写代码来将该数组与上面列出的 5 个角色进行比较。

生成的数组如下所示...

[
    {
        "id": 2,
        "name": "Analyst"
    },
    {
        "id": 4,
        "name": "AdminReviewer"
    }
]

到目前为止一切顺利。

这是我的问题...

当我去修补那个对象数组BACK INTO manageUsers 表单时，结果看起来像这样......

[
    {
        "id": 2,
        "name": "Analyst"
    },
    {
        "id": 4,
        "name": "AdminReviewer"
    },
    true,
    false,
    false
]

Angular 出于某种原因想要添加布尔值 来弥补三个缺失的元素。但事情是这样的，我只希望 this.manageUsers.value.userRoles 表单对象包含两个对象。我不需要多余的布尔值。

我只希望 this.manageUsers.value.userRoles 对象（我将其发送回数据库）看起来像这样......

[
    {
        "id": 2,
        "name": "Analyst"
    },
    {
        "id": 4,
        "name": "AdminReviewer"
    }
]

不像这样...

[
    {
        "id": 2,
        "name": "Analyst"
    },
    {
        "id": 4,
        "name": "AdminReviewer"
    },
    true,
    false,
    false
]

我尝试使用 BOTH .patchValue 和 .setValue 方法，但它们不起作用。

如何修补对象数组并告诉 Angular不为我不想考虑的角色包含布尔值？

*已更新...

这是我用来设置 userRoles 数组的代码...

this.manageUsers = this.formBuilder.group({
      id: null,
      firstName: ['', Validators.required],
      lastName: ['', Validators.required],
      userInitial: ['', Validators.required],
      netUserName: ['', Validators.required],
      workPhone: [null, [Validators.required, Validators.pattern("[0-9 ]{10}")]],
      email: ['', Validators.required],
      userTitle: ['', Validators.required],
      userRoles: new FormArray([], Validators.required),
      incidents: new FormArray([], Validators.required)
    })

然后，我创建了一个名为 userRolesArray...

的属性

public get userRolesArray() {
    return this.manageUsers.controls.userRoles as FormArray;
  }

然后，我创建了一个名为 addCheckboxesToManageUsers() 的属性，并在 ngInit() 方法中调用它。

private addCheckboxesToManageUsers(): void {
    this.listOfUserRoles.forEach(() => this.userRolesArray.push(new FormControl(false)));
  }

Answer 1

试试这个

const data = [
    {
        "id": 2,
        "name": "Analyst"
    },
    {
        "id": 4,
        "name": "AdminReviewer"
    },
    true,
    false,
    false
]

const newArr = data.reduce((prev, curr) => {
  if (typeof curr !== 'boolean') prev.push(curr);
  return prev;
}, []);

console.log(newArr)