Angular单选按钮表格赋值时仅首列显示 其余行列无法渲染

• allColumns在类属性初始化阶段就完成了赋值，此时displayColumns还是空数组，后续你修改displayColumns时allColumns不会自动同步更新，始终只有['question']一个列配置，框架识别不到其他列的定义。
• 你传入的dataSource是纯字符串组成的一维数组，而该表格组件要求传入对象数组，每个对象的属性名需要和列名一一对应。纯字符串格式下除了第一列你做了特殊适配，其余列找不到匹配的属性值，自然无法渲染。
• 手动用replace、split切割JSON字符串的解析方式鲁棒性极差，只要接口返回的字段顺序、内容里带逗号/引号就会解析失败。

直接替换你原来的ngOnInit逻辑，同时调整类属性的初始化时机：

formArray = new FormArray([
  new FormControl(),
  new FormControl(),
  new FormControl(),
]);
displayColumns: string[] = [];
dataSource: Record<string, any>[] = [];
// 初始化为空数组，等列配置解析完成后再赋值
allColumns: string[] = [];

ngOnInit(): void {
  this.questionSettin = JSON.parse(this.question_setting) 
  console.log(this.questionSettin[0].value);
  
  // 直接解析JSON结构，不要手动切割字符串
  const optionDesc = JSON.parse(this.QuestionOptions[0].option_description);
  const rowList = optionDesc.row.split("\\n").filter(i => i.trim());
  const colList = optionDesc.columns.split("\\n").filter(i => i.trim());

  // 先赋值列配置，再生成完整的列名数组
  this.displayColumns = colList;
  this.allColumns = ['question', ...this.displayColumns];

  // 生成表格要求的对象格式数据源
  this.dataSource = rowList.map(rowName => {
    const rowData: Record<string, any> = {
      question: rowName
    };
    // 为每一列初始化对应字段，供单元格渲染/单选按钮绑定
    colList.forEach(colName => {
      rowData[colName] = null;
    });
    return rowData;
  });

  console.log('解析后列配置：', this.allColumns);
  console.log('解析后数据源：', this.dataSource);
}

• 每个列定义的matColumnDef值必须和allColumns里的字段名完全一致，不能带多余空格、换行符
• 单元格渲染时通过对象属性取值，比如列名为option1时，模板里写{{ element.option1 }}即可
• 单选按钮的formControl绑定需要和formArray的索引、行列位置一一对应，避免值错位

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