Angular中如何将数组转为逗号分隔字符串并关联表单控件

1. 组件类新增字符串存储属性 #

在组件类中添加一个属性，专门用来保存转换后的逗号分隔字符串：

categoryIdsString: string = '';

2. 修改onButtonClick方法生成字符串 #

更新方法逻辑，将收集到的ID数组转换为逗号分隔格式并赋值给新增属性：

onButtonClick(value: any, categoryIds: number, index: number): any {
    const formArray = this.patientReportForm.get("hubxCategoryId") as FormArray;
    const matchedControl = formArray.controls.find(ctrl => ctrl.get('catId').value === categoryIds);
    const currentIndex = formArray.controls.indexOf(matchedControl);   
    ((formArray.at(currentIndex) as FormGroup).get('categoryId')).patchValue(value); 

    // 过滤空值并转换为逗号分隔字符串
    const Ids = formArray.value
        .map(item => item.categoryId)
        .filter(id => id != null && id !== '');
    this.categoryIdsString = Ids.join(',');

    return Ids;
}

3. 修正表单初始化逻辑 #

在getHubxReport方法中，categoryId是单个值控件，不应初始化为数组，调整如下：

formArray.push(this.formBuilder.group({
  catId: item.categoryId,
  categoryId: [''] // 初始化为空字符串，匹配单个值场景
}))

4. 模板中展示结果 #

在模板对应位置添加代码，即可展示逗号分隔的ID字符串：

<!-- 展示转换后的ID字符串 -->
<p>已选择的分类ID：{{ categoryIdsString }}</p>

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