如何在Angular中基于id和name匹配设置Checkbox FormControl选中状态

原本我从对象数组中提取id存入DOArr，通过id匹配将对应的Checkbox FormControl设为选中状态。现在需要同时匹配id与name进行强校验，只有当两者都匹配时才设置Checkbox为选中状态。

原数据与代码 #

数据结构 #

{
    "selectedDC": {
        "DC": [{
                "id": "23293839",
                "name": "Legal · L5",
                "active": true,
                "parentid": "23293827",
                "level": 4
            },
            {
                "id": "23293839",
                "name": "Balance · L2",
                "active": true,
                "parentid": "23293807",
                "level": 2
            }
        ]
    }
}

原提取选中id的代码 #

let DOArr: [] = [];

for (const tmpDataOwner of this.dataConceptDetailsObj['selectedDC']['DC']) {
    this.DOArr.push(tmpDataOwner.id);
}

原生成FormControl的代码 #

const formControls = this.dataOwnerList.map(
    (control) => {
        if(this.DOArr.includes(control.id)){
            return new FormControl(true);
        } else {
            return new FormControl(false);
        }
    }
);

修改方案 #

因为要同时校验id和name，不能仅存储单一id，需要调整存储逻辑和匹配逻辑：

方案1：存储id+name组合，再匹配 #

1. 更新选中项存储逻辑
   不再只存id，而是存储包含id和name的对象集合：

   // 定义存储结构，仅保留需要匹配的字段
   let selectedPairs: Array<{id: string; name: string}> = [];
   
   for (const tmpDataOwner of this.dataConceptDetailsObj['selectedDC']['DC']) {
       selectedPairs.push({
           id: tmpDataOwner.id,
           name: tmpDataOwner.name
       });
   }
   

2. 更新FormControl生成逻辑
   遍历控件时，同时校验id和name是否匹配：

   const formControls = this.dataOwnerList.map(control => {
       const isMatched = selectedPairs.some(pair => 
           pair.id === control.id && pair.name === control.name
       );
       return new FormControl(isMatched);
   });
   

方案2：直接对比原始数据（无需额外存储） #

如果不需要单独保留选中项集合，可以直接在生成控件时对比原始数据：

const formControls = this.dataOwnerList.map(control => {
    const isMatched = this.dataConceptDetailsObj['selectedDC']['DC'].some(item => 
        item.id === control.id && item.name === control.name
    );
    return new FormControl(isMatched);
});

内容的提问来源于stack exchange，提问作者Mitul Panchal