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

Question

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

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

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"
    }
]

到目前为止，一切都很好。

这是我的问题...

当我将该对象数组修补回 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
]

我试过同时使用.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

从this.manageUsers.value.userRoles获取值后，使用 reducer 删除所有boolean类型的值。

 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)