Angular使用PrimeNG通过ngFor渲染单选按钮时整行被选中问题求助

问题原因&解决方案 #

你遇到的两个问题分别对应两个常见的前端开发错误，按优先级修复即可：

1. 单选按钮联动的核心原因：name属性重复

HTML原生单选按钮的互斥逻辑完全依赖name属性：所有name属性相同的单选按钮会被判定为同一组，同一组内仅能选中一个值。
你当前的代码中，所有分类下的Option1单选按钮name都是permission1、Option2都是permission2，相当于把所有分类的同列单选按钮都归到了同一组，选中一个自然会触发整列/整行的选中状态同步。
修复方案：
给name属性拼接每个权限分类的唯一标识（比如分类ID、分类名），保证同一分类下的同选项按钮name相同，不同分类的name不重复：

<!-- 示例假设item.id是分类的唯一ID，你也可以用item.name替代 -->
<p-radioButton name="{{item.id}}_permission1" [(ngModel)]="item['Option1']" value="0"></p-radioButton>
<p-radioButton name="{{item.id}}_permission2" [(ngModel)]="item['Option2']" value="0"></p-radioButton>
<p-radioButton name="{{item.id}}_permission3" [(ngModel)]="item['Option3']" value="0"></p-radioButton>

所有行的单选按钮都按照这个规则修改name属性即可。

2. 所有分类取值同步更新的核心原因：对象引用复用

如果修改一个分类的权限值，其他分类的权限也同步变化，说明你初始化数据时，给多个分类赋值了同一个内存地址的权限对象，属于浅拷贝导致的引用共享问题。
比如你可能是这么初始化的：

// 错误示例：所有分类复用同一个basePerm对象
const basePerm = { Option1: 0, Option2: 0, Option3: 0 };
this.rowData = [
  { name: '测试分类1', permissions: [basePerm] },
  { name: '测试分类2', permissions: [basePerm] }
];

修复方案：
给每个分类单独创建独立的权限对象：

// 每次调用都返回新的权限对象
const createEmptyPerm = () => ({ Option1: 0, Option2: 0, Option3: 0 });
this.rowData = [
  { name: '测试分类1', permissions: [createEmptyPerm()] },
  { name: '测试分类2', permissions: [createEmptyPerm()] }
];

3. 额外注意点

你代码中的[(ngModel)]="item[Option1]"写法需要确认：如果Option1是你定义的字符串常量，要改为item['Option1']，避免把Option1当成全局变量读取，导致绑定错误出现联动问题。

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