Angular将嵌套数组对象转换为逗号分隔值后绑定到grid的实现问题

你只需要在给gridData赋值前，对customAttributes数组的每一项做字段加工即可，修改后的代码如下：

this.customFieldsService.getCustomFields(this.columnList, this.pageNumber, this.pageSize, null).subscribe(res => {
  if(res){
    this.cfData = res;
    // 加工处理inputValues字段
    const processedList = this.cfData.customAttributes.map(attrItem => {
      // 提取所有value字段，兼容空值场景
      const valueArr = attrItem.inputValues?.map(v => v.value) || [];
      return {
        ...attrItem,
        // 若需要保留数组格式，直接赋值valueArr即可
        // 若需要逗号分隔的字符串，使用valueArr.join(',')
        inputValues: valueArr
      }
    })
    this.gridData = {
        data: processedList,
        total: this.cfData.totalCount
    }
  }      
});

逻辑说明 #

• 外层Array.map()用于遍历所有自定义属性项，用扩展运算符...保留原有所有字段，仅修改inputValues
• 内层Array.map()用于遍历inputValues的对象数组，提取每个对象的value属性，得到纯字符串构成的数组
• 可选链?.和兜底逻辑|| []用于兼容inputValues为空/为null的异常场景，避免运行时报错
• 你可以根据grid组件的要求选择输出数组格式还是逗号分隔的字符串格式，两种写法都在注释中给出

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