Angular中如何将动态生成的复选框与数据库值对比设置选中状态

你只需要在拿到数据库返回的aType数据之后，遍历allATypes数组，给每个元素的checked属性赋值即可，具体实现如下：

单匹配场景（数据库仅返回一个需要选中的标识） #

在组件的业务逻辑中添加如下代码：

// 从接口获取到数据库返回的aType数据后执行
const targetLabel = aType.allgemeinesMerkmal?.bezeichnung;

this.allATypes = this.allATypes.map(item => ({
  ...item,
  checked: targetLabel ? item.bezeichnung === targetLabel : false
}))

多匹配场景（数据库返回多个需要选中的标识） #

如果数据库返回的是多个选中值的数组，建议先转成Set提高查找效率：

// 假设数据库返回的已选中标识为数组形式
const selectedLabels = new Set(
  aType.allgemeinesMerkmal.map(item => item.bezeichnung)
);

this.allATypes = this.allATypes.map(item => ({
  ...item,
  checked: selectedLabels.has(item.bezeichnung)
}))

注意事项 #

• 你当前的模板双向绑定写法是正确的，只要确保所在模块已经导入FormsModule和MatCheckboxModule，绑定的checked属性变更会自动同步到复选框的选中状态
• 如果需要提交数据时获取当前选中的所有项，可通过过滤数组实现：

const submitSelected = this.allATypes.filter(item => item.checked);

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